/* =============================================================================
   STYLES-CLAUDE.CSS — v2
   Base : styles-claude.css (fusion styles.css + content.css + commun.css)

   Ce que j'ai changé par rapport à la version précédente (et pourquoi) :
   - Ajout d'une palette de variables CSS (§0) pour unifier les couleurs
     d'accent qui étaient légèrement différentes selon les endroits :
       . orange/brun de titre : 4 teintes différentes (#D56009, #b97b2b,
         #b56a18, #b16f24) → une seule variable --accent-text
       . bleu de sous-titre : 2 teintes différentes (#2D618F, #355987)
         → une seule variable --blue-text
     Les autres rôles (boutons actifs, badges km, teintes vertes) étaient
     déjà cohérents : ils sont simplement passés en variables, sans
     changement de valeur.
   - L'en-tête (#header, #entete, #menu de navigation principal) n'a pas
     été touché : il reste strictement identique.
   - Correction d'un bug mineur : `font-size: higher` (valeur invalide,
     ignorée par le navigateur) remplacée par une vraie valeur.
   - Suppression d'une règle vide sans effet.
   - Ajout d'états focus (:focus-visible) sur les liens/boutons pour
     l'accessibilité clavier — invisibles à la souris, sans impact visuel
     habituel.
   - Léger confort de lecture : interligne des paragraphes un peu plus
     aéré, défilement doux vers les ancres (#coeur via le lien d'évitement).
   ============================================================================= */

/* -----------------------------------------------------------------------
   0. PALETTE (variables)
   ----------------------------------------------------------------------- */

:root {
    /* Verts (identité du club) */
    --green-title:   green;      /* H2 : titres de page */
    --green-text:    #31583d;    /* textes verts (menu latéral, badges, liens blog) */
    --green-hover:   #2f6b31;    /* survol du vert */
    --green-bright:  #2d6f3c;    /* dates du calendrier, pastille guide */
    --green-tint:    #eef4ea;    /* fond vert très clair (badges, pastilles) */

    /* Accent terracotta — unifié (voir note ci-dessus) */
    --accent-text:   #d97b2d;    /* titres H3, liens de circuit, libellés de profil */
    --accent-btn-1:  #c98334;    /* boutons/onglets actifs (dégradé haut) */
    --accent-btn-2:  #b36c27;    /* boutons/onglets actifs (dégradé bas) */
    --accent-underline: #d97b2d; /* soulignement du menu principal */
    --walnut:        #6a5738;    /* badge distance (texte) */
    --walnut-tint:   #f2ecde;    /* badge distance (fond) */

    /* Bleus */
    --blue-text:     #2D618F;    /* H4, titres de sortie dans le calendrier */
    --blue-link:     #537BAF;
    --blue-link-hover: #6CB0D4;
    --blue-grey-border: #6F7A95; /* bordures des anciens tableaux */

    /* Neutres */
    --paper:    #fbfbfa;
    --paper-2:  #faf9f4;
    --paper-3:  #fcfcf9;
    --ink:      #404040;
    --ink-soft: #777777;
    --border:   #ddd6c7;
    --border-2: #d9ddd8;
    --bg:       #e9dec9;
    --panel:    #ece9e1;

    /* Ombres réutilisées */
    --shadow-xs: 0 2px 6px rgba(0,0,0,.06);
    --shadow-sm: 0 4px 10px rgba(40,45,25,.06);
    --shadow-md: 0 6px 16px rgba(40,45,25,.07);
    --shadow-lg: 0 10px 28px rgba(40,45,25,.08);
}

/* -----------------------------------------------------------------------
   1. POLICES
   ----------------------------------------------------------------------- */

@font-face {
    font-family: "Caveat";
    src: url("./fonts/Caveat-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

/* -----------------------------------------------------------------------
   2. BASE
   ----------------------------------------------------------------------- */

html {
    scroll-behavior: smooth;
}

body {
    background: var(--bg);
    margin: 0;
    padding: 0;
    font: normal 12pt/1.3 "Trebuchet MS", Arial, sans-serif;
    color: var(--ink);
}

p {
    text-align: justify;
    margin: .5em 0;
    line-height: 1.6;
}

img {
    border: none;
}

table {
    border-collapse: collapse;
}

td, th {
    border: 1px solid var(--blue-grey-border);
    padding: 5px;
}

th {
    text-align: center;
}

hr {
    width: 80%;
    margin: 2em;
}

/* -----------------------------------------------------------------------
   3. TYPOGRAPHIE
   ----------------------------------------------------------------------- */

h2 {
    color: var(--green-title);
    font-variant: small-caps;
    text-align: center;
    font-family: "Times New Roman", serif;
    font-size: 2em;
    margin: 0;
    padding: 20px;
}

h3 {
    color: var(--accent-text);
    margin: 1em;
    font-size: 1.2em;
}

h4 {
    color: var(--blue-text);
    font-size: 1.1em;
    padding-left: 4px;
    font-style: italic;
}

h5 {
    font-size: 1em;
}

/* -----------------------------------------------------------------------
   4. LIENS
   ----------------------------------------------------------------------- */

a {
    color: var(--blue-link);
    text-decoration: none;
}

a:hover {
    color: var(--blue-link-hover);
}

a:focus-visible {
    outline: 2px solid var(--accent-text);
    outline-offset: 2px;
    border-radius: 3px;
}

/* -----------------------------------------------------------------------
   5. LISTES
   ----------------------------------------------------------------------- */

ul {
    list-style-image: url(puce-p2.png);
    padding: 0;
    margin: 1em 0 1em 24px;
}

ul ul {
    list-style-image: url(puce-n2.png);
    margin: 4px 0 6px 24px;
}

dd ul {
    margin: 4px 10px 10px;
}

li {
    padding-bottom: 5px;
}

/* -----------------------------------------------------------------------
   6. STRUCTURE GÉNÉRALE (gabarit de page)
   ----------------------------------------------------------------------- */

#global {
    width: 1000px;
    max-width: 100%;
    margin: 20px auto;
    position: relative;

    background: var(--panel);
    border-radius: 22px;

    border: 1px solid #bdbdb8;

    box-shadow:
        0 1px 0 rgba(255,255,255,.9) inset,
        0 8px 24px rgba(0,0,0,.18),
        0 2px 6px rgba(0,0,0,.08);
}

#header {
    position: relative;
    --citation: "Marcher, respirer, découvrir.";

    background-image: url('./header1.jpg');
    background-size: cover;
    background-position: center 38%;

    border-top-left-radius: 20px;
    border-top-right-radius: 20px;

    box-sizing: border-box;
}

#header h1 {
    text-align: center;
    margin: 0;
    padding: 20px 20px 0;
    height: 200px;
    box-sizing: border-box;
}

#header h1 a {
    display: block;

    background: url('./logo-transparent5.png') center center no-repeat;
    background-size: 220px auto;

    width: 230px;
    height: 120px;

    position: absolute;
    top: 28px;
    right: 100px;
    left: 40px;

    border-radius: 0;
    box-shadow: none;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,.55));

    text-indent: -9999px;
    overflow: hidden;
}

#header::after {
    content: var(--citation);

    position: absolute;
    right: 90px;
    top: 105px;

    white-space: pre;

    font-family: "Caveat", cursive;

    font-size: 30px;
    line-height: 1.05;
    font-style: italic;
    color: #fff;
    text-align: right;

    text-shadow:
        0 2px 4px rgba(0,0,0,.65),
        0 0 12px rgba(0,0,0,.35);

    pointer-events: none;
    opacity: .92;
}

#coeur {
    position: relative;
    margin: 2.5%;
    padding: 2.5%;

    background: var(--paper);
    border-radius: 16px;

    border: 1px solid #d6d6d2;

    box-shadow: 0 4px 14px rgba(0,0,0,.12);
}

#coeur:before {
    content: "";
    position: absolute;
    inset: 6px;

    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.75);

    pointer-events: none;
}

#pied {
    display: flex;
    justify-content: space-between;
    align-items: center;
    clear: both;
    margin-top: 30px;
    padding: 18px 28px;
    border-top: 1px solid #d9d9d9;
    font-size: 0.92em;
}

#pcopyright, #copyright {
    margin: 0;
    color: #777;
}

#f_liens {
    display: flex;
    align-items: center;
    gap: 10px;
}

#f_liens a {
    color: #666;
    text-decoration: none;
    transition: color .2s ease;
}

#f_liens a:hover {
    color: #357636;
}

#f_liens span {
    color: #bbb;
    user-select: none;
}

@media (max-width: 700px) {
    #pied {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    #f_liens {
        flex-wrap: wrap;
        justify-content: center;
    }
}

p#evitement {
    padding: 0;
    margin: 0;
    color: blue;
    position: absolute;
    right: 28px;
    top: -16px;
    font-size: 10px;
}

p#evitement a {
    color: gray;
    font-family: arial;
}

p#evitement a:hover {
    color: white;
}

/* -----------------------------------------------------------------------
   7. NAVIGATION - Menu principal
   ----------------------------------------------------------------------- */

#menu {
    width: 100%;
    position: relative;
    overflow: hidden;

    background: linear-gradient(
        to bottom,
        rgba(57,108,55,.78),
        rgba(36,88,39,.78)
    );

    backdrop-filter: blur(4px);

    border-top: 1px solid rgba(255,255,255,.16);
    border-bottom: 1px solid rgba(0,0,0,.20);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        0 2px 8px rgba(0,0,0,.18);
}

/* léger reflet sur le haut */
#menu::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background: linear-gradient(
        to bottom,
        rgba(255,255,255,.08),
        rgba(255,255,255,0) 40%
    );
}

#menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}

#menu li {
    display: inline-block;
    margin: 0;
    padding: 0;
}

#menu li a {
    display: block;

    padding: 11px 26px;

    color: #ffffff;
    text-decoration: none;

    font-family: "Trebuchet MS", Arial, sans-serif;
    font-size: 17px;
    font-weight: 600;

    letter-spacing: .2px;

    position: relative;

    text-shadow: 0 1px 2px rgba(0,0,0,.35);

    transition:
        background .25s,
        color .25s,
        transform .20s;
}

/* survol + petit effet de mouvement */
#menu li a:hover {
    color: #f6ffe8;
    background: rgba(255,255,255,.08);
    transform: translateY(-1px);
}

#menu li a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -4px;
    color: #f6ffe8;
}

/* soulignement orange */
#menu li a::after {
    content: "";

    position: absolute;

    left: 20px;
    right: 20px;
    bottom: 2px;

    height: 3px;

    background: var(--accent-underline);

    border-radius: 20px;

    box-shadow: 0 0 5px rgba(217,123,45,.45);

    transform: scaleX(0);

    transition: transform .25s;
}

#menu li:hover a::after {
    transform: scaleX(1);
}

#menu li.actif a {
    color: #ffffff;
}

#menu li.actif a::after {
    transform: scaleX(1);
}

/* suppression des chevrons */
#menu li span {
    display: none;
}

/* -----------------------------------------------------------------------
   8. NAVIGATION - Menu "sorties"
   ----------------------------------------------------------------------- */

#menu-sortie {
    text-align: center;
    margin: 25px 0 35px;
}

#menu-sortie ul {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;

    margin: 0;
    padding: 0;

    list-style: none;
}

#menu-sortie li {
    margin: 0;
}

#menu-sortie li a {
    display: block;

    padding: 10px 18px;

    border-radius: 18px;

    background: rgba(255,255,255,.65);

    border: 1px solid var(--border-2);

    color: var(--green-text);

    font-weight: 600;

    text-decoration: none;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.85),
        0 2px 6px rgba(0,0,0,.06);

    transition: .2s;
}

#menu-sortie li a:hover {
    background: white;
    transform: translateY(-1px);
}

#menu-sortie li a:focus-visible {
    outline: 2px solid var(--accent-btn-2);
    outline-offset: 2px;
}

#menu-sortie li.actif a {
    background: var(--accent-btn-1);
    border-color: var(--accent-btn-1);
    color: white;
}

/* -----------------------------------------------------------------------
   9. NAVIGATION - Menu secondaire (bloc pages, ul#menu-bp)
   ----------------------------------------------------------------------- */

ul#menu-bp {
    float: left;
    width: 190px;

    margin: 10px 35px 30px 0;
    padding: 0 25px 0 0;

    list-style: none;

    border-right: 1px solid var(--border-2);
}

ul#menu-bp li {
    margin: 0 0 8px;
}

ul#menu-bp li a {
    display: block;

    padding: 12px 18px;

    border-radius: 14px;

    background: rgba(255,255,255,.55);

    color: var(--green-text);

    font-weight: 600;

    text-decoration: none;

    border: 1px solid rgba(255,255,255,.65);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.80),
        0 2px 6px rgba(0,0,0,.05);

    transition:
        background .20s,
        color .20s,
        transform .20s,
        box-shadow .20s;
}

/* survol */
ul#menu-bp li a:hover {
    background: rgba(255,255,255,.92);

    color: var(--green-hover);

    transform: translateX(4px);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.90),
        0 5px 12px rgba(0,0,0,.10);
}

ul#menu-bp li a:focus-visible {
    outline: 2px solid var(--accent-btn-2);
    outline-offset: 2px;
}

/* page active */
ul#menu-bp li.actif a {
    background: linear-gradient(
        to bottom,
        var(--accent-btn-1),
        var(--accent-btn-2)
    );

    color: #fff;

    border-color: var(--accent-btn-2);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.20),
        0 5px 12px rgba(0,0,0,.15);
}

/* décalage du contenu quand le menu secondaire est présent */
body.presentation h2,
body.presentation #texte,
body.boulaie h2,
body.boulaie #texte {
    margin-left: 235px;
}

/* -----------------------------------------------------------------------
   10. IMAGES ET CADRES PHOTO
   ----------------------------------------------------------------------- */

img.ombre {
    box-shadow: 4px 4px 6px rgb(170,170,170);
    border-radius: 10px;
}

.imgGauche {
    float: left;
    margin: 0 20px 20px 0;
}

.imgDroite {
    float: right;
    margin: 0 0 20px 20px;
}

.imgCentre {
    display: block;
    margin: 20px auto;
}

/* Cadres (légende + bordure) */
.cadreDroite,
.cadreGauche,
.cadreCentre {
    display: inline-block;

    padding: 10px;

    background: #fff;

    font-family: "Times New Roman", Times, serif;

    border: 1px solid var(--border);
    border-radius: 14px;

    box-shadow: var(--shadow-md);

    text-align: center;

    line-height: 1.4;

    color: var(--ink-soft);

    clear: both;
    margin-bottom: 3px;
}

.cadreDroite {
    float: right;
    margin: 0 0 20px 25px;
}

.cadreGauche {
    float: left;
    margin: 0 25px 20px 0;
}

.cadreCentre {
    display: table;
    margin: 30px auto;
}

body.boulaie .cadreDroite,
body.boulaie .cadreCentre,
body.boulaie .cadreGauche {
    clear: none;
}

.cadreDroite img,
.cadreGauche img,
.cadreCentre img {
    display: block;

    max-width: 100%;
    height: auto;

    border-radius: 10px;

    transition: transform .2s ease;
}

.cadreDroite:hover img,
.cadreGauche:hover img,
.cadreCentre:hover img {
    transform: scale(1.02);
}

.cadreDroite a,
.cadreGauche a,
.cadreCentre a {
    display: block;

    margin-top: 10px;

    text-decoration: none;

    font-weight: 600;

    font-size: .95rem;
}

.cadreDroite a:hover,
.cadreGauche a:hover,
.cadreCentre a:hover {
    color: var(--accent-underline);
}

/* Encarts */
.encart {
    margin: 30px auto;

    padding: 18px 22px;

    background: var(--paper-2);

    border: 1px solid var(--border);
    border-radius: 14px;

    box-shadow: 0 5px 14px rgba(40,45,25,.05);
}

#accueil.general #coeur div img {
    position: relative;
    left: 4px;
}

.boulaie iframe {
    display: block;
    margin: 30px auto;
}
.separateur-houx {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 0 5px;
}

.separateur-houx::before,
.separateur-houx::after {
    content: "";
    width: 120px;
    height: 1px;
    background: #d0d0d0;
}

.separateur-houx img {
    display: block;
    width: 30px;
    height: auto;
}
/* -----------------------------------------------------------------------
   11. LISTES SPÉCIFIQUES (catégories, liens, cotations)
   ----------------------------------------------------------------------- */

#liste_liens {
    padding: 0 50px 0 100px;
}

#liste_liens li a img {
    position: absolute;
    left: -2000px;
}

#liste_liens li a:hover img {
    left: 0;
}

/* Code couleur des cotations de difficulté : volontairement indépendant
   de la palette du site (signalétique à valeur sémantique). */
.cot1 {
    background-color: #d7dad6;
}

.cot2 {
    background-color: #93cdd8;
}

.cot3 {
    background-color: #8ed150;
}

.cot4 {
    background-color: #ffbf00;
}

.cot5 {
    background-color: #ff0000;
}

.cot1, .cot2, .cot3, .cot4, .cot5 {
    padding: 3px;
    border-radius: 5px;
    font-style: italic;
}

#accueil.general h2 span {
    display: block;
    font-size: 70%;
    font-variant: normal;
    padding-bottom: 4px;
    font-style: italic;
}

/* -----------------------------------------------------------------------
   12. TABLEAUX
   ----------------------------------------------------------------------- */

table#candidats {
    width: 90%;
    border-collapse: collapse;
}

table#candidats td {
    border: 1px solid #d8d8d8;
}

table#table-programme2008 {
    border-collapse: collapse;
    border: 1px solid var(--blue-grey-border);
    margin: auto;
}

#table-programme2008 td {
    background: white;
}

#table-programme2008 th+td {
    background: #DDDDDD;
}

#table-programme2008 thead th {
    background: var(--blue-grey-border);
    color: white;
}

body#tchequie table {
    margin: 40px auto;
    background: white;
}

body#tchequie table * {
    text-align: left;
}

body#tchequie table th {
    background: #DEDEDE;
}

/* Circuits pédestres */
body#n0 table {
    width: min(100%,760px);
    margin: 30px auto 45px;

    border-collapse: separate;
    border-spacing: 0 12px;

    background: none;
}

body#n0 table tr {
    transition: transform .18s ease;
}

body#n0 table tr:hover {
    transform: translateY(-2px);
}

body#n0 table td {
    padding: 15px 18px;

    background: var(--paper-2);

    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);

    box-shadow: var(--shadow-sm);

    vertical-align: middle;
}

body#n0 table td:first-child {
    width: 80px;

    text-align: center;

    border-left: 1px solid var(--border);
    border-radius: 14px 0 0 14px;

    background: var(--green-tint);

    color: var(--green-text);

    font-weight: 700;
}

body#n0 table td:last-child {
    width: 95px;

    text-align: center;

    border-right: 1px solid var(--border);
    border-radius: 0 14px 14px 0;

    background: var(--walnut-tint);

    color: var(--walnut);

    font-weight: 700;
}

td.ptitre {
    background: var(--paper-2);
}

td.ptitre a {
    display: block;

    color: var(--green-text);

    font-size: 1.08rem;

    font-weight: 700;

    text-decoration: none;

    transition: color .2s ease;
}

body#n0 table tr:hover td.ptitre a {
    color: var(--accent-text);
}

body#code-randonneur #coeur p {
    line-height: 1.7em;
    font-size: 1.05em;
    margin-left: 20px;
}

/* -----------------------------------------------------------------------
   13. CALENDRIER DES SORTIES
   ----------------------------------------------------------------------- */

#calendrier {
    width: 100%;
    max-width: 900px;
    margin: 35px auto;
    border-collapse: separate;
    border-spacing: 0 10px;
}

#calendrier th {
    padding: 28px 0 10px;
    text-align: left;
    border: 0;
    background: none;
}

#calendrier th h3 {
    margin: 0;
    padding: 0 0 8px;
    font-size: 1.55em;
    font-weight: normal;
    color: var(--accent-text);
    border-bottom: 1px solid #d8c7a7;
    position: relative;
    padding-left: 34px;
}

#calendrier th h3::before {
    content: "🍃";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: .85em;
}

#calendrier td {
    border: 0;
    vertical-align: middle;
    box-shadow: var(--shadow-xs);
    transition: all .18s ease;
}

#calendrier td.caldate {
    width: 150px;
    padding: 8px 14px;

    background: #f7f5ef;

    border: 1px solid #ded7c8;
    border-right: 0;

    border-radius: 12px 0 0 12px;

    white-space: nowrap;
}

#calendrier .date_j {
    display: block;

    font-size: .72em;

    text-transform: uppercase;

    letter-spacing: .08em;

    color: var(--ink-soft);

    font-weight: bold;
}

#calendrier .date_n {
    display: block;

    margin-top: 2px;

    font-size: 2.05em;

    line-height: 1;

    font-weight: 700;

    color: var(--green-bright);
}

#calendrier td.caldescription {
    padding: 10px 16px;

    background: #fff;

    border: 1px solid #ded7c8;
    border-left: 0;

    border-radius: 0 12px 12px 0;
}

#calendrier td.caldescription h4 {
    margin: 0;

    padding: 0;

    font-size: 1.08em;

    font-style: normal;

    font-weight: 600;

    color: var(--blue-text);
}

#calendrier .calguide {
    display: inline-block;

    margin-top: 8px;

    padding: 3px 10px;

    border-radius: 30px;

    background: var(--green-tint);

    color: var(--green-bright);

    font-size: .88em;

    font-style: normal;
}

#calendrier tr:hover td {
    transform: translateY(-1px);
}

#calendrier tr:hover td.caldate {
    background: #faf7f1;
    border-color: #d3b784;
}

#calendrier tr:hover td.caldescription {
    background: #fffefb;
    border-color: #d3b784;
}

#calendrier .modif_date {
    display: none;
    float: right;
}

#calendrier .caldate:hover .modif_date {
    display: inline;
}

.moisprecedent,
.moissuivant {
    margin: 0;
    padding: 6px;
    border-radius: 12px;
    background: white;
    border: solid 1px var(--border-2);
    color: #fff;
}

.moissuivant {
    float: right;
}

.moisprecedent {
    float: left;
}

/* -----------------------------------------------------------------------
   14. FORMULAIRES
   ----------------------------------------------------------------------- */

#formulaire input, #formulaire textarea, #formulaire select {
    width: 400px;
    border: 1px solid #999;
}

#formulaire input:focus-visible,
#formulaire textarea:focus-visible,
#formulaire select:focus-visible {
    outline: 2px solid var(--accent-text);
    outline-offset: 1px;
}

#formulaire p {
    padding: 10px !important;
    margin: 0;
}

#formulaire label {
    width: 120px;
    padding-right: 10px;
    text-align: right;
    float: left;
}

#formulaire #envoyer {
    text-align: center;
}

#formulaire .focus {
    background: yellow;
}

strong.alerte {
    color: red;
}

body.parcours .plan-parcours {
    text-align: center;
    margin: 40px auto 30px;
}

body.parcours .plan-parcours img {
    max-width: 100%;
    height: auto;

    border-radius: 16px;

    background: white;

    padding: 12px;

    box-shadow: var(--shadow-md);
}

body.parcours form {
    margin: 30px auto;
    text-align: center;
}

body.parcours select {
    min-width: 340px;
    max-width: 100%;
    padding: 10px 14px;

    border: 1px solid var(--border);
    border-radius: 10px;

    background: var(--paper-2);

    font-size: 1rem;

    box-shadow: var(--shadow-md);
}

body.parcours select:focus-visible {
    outline: 2px solid var(--accent-text);
    outline-offset: 1px;
}

/* -----------------------------------------------------------------------
   15. PROFIL DU CIRCUIT
   ----------------------------------------------------------------------- */

#pprofil {
    max-width: 820px;

    margin: 35px auto;

    padding: 22px 26px;

    list-style: none;

    background: linear-gradient(var(--paper-3), #f7f6ef);

    border: 1px solid var(--border);
    border-radius: 16px;

    box-shadow: 0 8px 22px rgba(40,45,25,.06);
}

#pprofil li {
    display: flex;
    align-items: flex-start;

    gap: 10px;

    margin: 0;
    padding: 8px 0;

    border-bottom: 1px dashed #e6dfd1;

    line-height: 1.6;
}

#pprofil li:last-child {
    border-bottom: none;
}

#pprofil .label {
    flex: 0 0 120px;

    color: var(--accent-text);

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .03em;
}

/* icône devant chaque ligne */
#pprofil li::before {
    content: "🌿";

    flex: none;

    margin-top: 2px;

    font-size: 1rem;
}

.stitre {
    margin-top: 12px;

    text-align: center;

    color: var(--ink-soft);

    font-size: .95rem;

    font-style: italic;
}

#cv-vezouze .stitre {
    padding-bottom: 26px;
}

/* -----------------------------------------------------------------------
   16. BLOG
   ----------------------------------------------------------------------- */

.blog {
    position: relative;
    margin: 0 0 65px;
}

div.billet {
    position: relative;

    background: linear-gradient(#ffffff,#fcfbf8);

    border: 1px solid var(--border);

    border-radius: 20px;

    padding: 34px;

    margin-top: 18px;

    overflow: hidden;

    box-shadow:
        var(--shadow-lg),
        inset 0 1px 0 rgba(255,255,255,.8);
}

.blog .modif_billet {
    float: right;
}

.blog:hover .modif_billet {
    display: block;
}

p.bdate {
    float: right;

    margin: 6px 0 0;

    padding: 8px 14px;

    font-size: .82rem;

    color: var(--ink-soft);

    background: #f7f4eb;

    border-radius: 999px;

    border: 1px solid #ece4d2;
}

.blog h3 {
    display: flex;

    align-items: flex-start;

    gap: 12px;

    margin: 0 180px 26px 0;

    color: var(--accent-text);
    font-size: 1.8rem;

    font-weight: 700;

    line-height: 1.15;

    letter-spacing: -.02em;
}

/* petite feuille devant le titre 
.blog h3::before {
    content: "🌿";

    flex: none;

    font-size: 1.35rem;

    margin-top: .20em;
}
*/
/* suppression du houx */
.blien {
	float: left;
	margin: 0;
	padding: 0;
}
.blien img {
	max-width: 38px;
	margin: -5px 20px 0 0;
}
#blog img[src*="rss"] {
    transition: transform .2s ease;
}

#blog img[src*="rss"]:hover {
    transform: rotate(15deg) scale(1.08);
}

/* séparateur */
#blog div.hr {
    display: none;
}

.billet img {
    display: block;

    max-width: 100%;

    height: auto;

    margin: 25px auto;

    border-radius: 14px;

    box-shadow: 0 8px 22px rgba(40,45,25,.10);
}

.iplan {
    border-radius: 12px;

    border: 1px solid var(--border);

    box-shadow: var(--shadow-md);
}

.annonces {
    margin: 28px 0;
    text-align: center;
}

.annonces a {
    display: inline-block;

    padding: 11px 18px;

    border-radius: 999px;

    background: var(--green-tint);

    color: var(--green-text);

    text-decoration: none;

    font-weight: 600;

    transition: .2s;
}

.annonces a:hover {
    background: var(--green-text);
    color: #fff;
}

.annonces a:focus-visible {
    outline: 2px solid var(--accent-text);
    outline-offset: 2px;
}

.annonces a.modif_annonce {
    display: none;

    position: absolute;

    padding: 0;

    background: none;
}

.annonces:hover a.modif_annonce {
    display: inline;
}

body.sorties #texte h3 {
    margin: 35px 0 15px;
    padding: 0;
}

body.sorties #texte p {
    padding: 0;
    margin: 10px;
}

/* -----------------------------------------------------------------------
   17. PHOTOS
   ----------------------------------------------------------------------- */

#pop {
    position: absolute;
    cursor: move;
    left: 3px;
    top: 3px;
    display: none;
    z-index: 200;
    background-color: #FFF;
    border: 3px outset;
}

#tet {
    font: 12px/18px "Comic Sans MS", "Times New Roman", Times, serif;
    color: white;
    background-color: #000;
    padding: 0 20px 0 .5em;
    white-space: nowrap;
}

#croix {
    position: absolute;
    margin: 0;
    border: 0;
    background: red;
    color: white;
    font-weight: bold;
    right: 0;
    top: 0;
    padding: 0;
    width: 16px;
    cursor: pointer;
}

#photos ul {
    margin: 0 !important;
    padding: 0 !important;
}

#liste-photos {
    text-align: center;
}

#liste-photos li {
    display: inline;
    padding: 10px;
    border-spacing: 0 10px;
}

#liste-photos a {
    background: white;
    border: 2px dotted gray;
    text-decoration: none;
    display: inline-block;
    line-height: 25px;
    font: 90% arial;
    padding-bottom: 4px;
}

#liste-photos a img {
    display: block;
    padding: 10px 10px 3px;
}

#liste-photos a:hover,
#liste-photos a:focus {
    opacity: .7;
}

p#googlemap {
    cursor: pointer;
    padding: 40px 0 16px;
}

p#googlemap img {
    vertical-align: middle;
}

#rss {
    position: absolute;
    right: 30px;
    margin-top: -80px;
}

.addthis_button_compact {
    float: right;
    margin-right: -10px;
    padding-left: 4px;
}

/* -----------------------------------------------------------------------
   18. PAGES / SECTIONS DIVERSES
   ----------------------------------------------------------------------- */

#lesplans {
    text-align: center;
 
    padding-top: 30px;
}

#lesplans p {
    text-align: center;
}

body.presentation dt {
    font-style: italic;
}

#cv-federation ul {
    padding: 10px 0 0 40px;
}

#cv-federation h3,
#cv-vezouze h3 {
    font-size: 1.2em;
    margin: 1em 0;
    text-align: center;
}

#cv-vezouze h3 {
    margin-top: 2.8em;
}

#cv-vezouze h3 span {
    font-size: smaller;
    display: block;
}

p#liste-comite {
    margin: 20px 50px;
    padding: 5px 5px 5px 35px;
    border: 1px solid #DCDCDC;
    text-align: left;
    background: white url(/images/tango/config-users.png) no-repeat 8px center;
}

.pagination {
    display: flex;
    justify-content: space-between;
    margin: 30px 0;
}

.pagination a {
    padding: 10px 18px;
    border: 1px solid #d7d7d7;
    border-radius: 8px;
    text-decoration: none;
    color: #2f6d3b;
    transition: .2s;
}

.pagination a:hover {
    background: #f5f8f3;
    border-color: #2f6d3b;
}

/* =========================================================================
   19. RESPONSIVE
   ========================================================================= */

@media (max-width: 900px) {

    .blog h3 {
        margin-right: 0;
        font-size: 1.8rem;
    }

    p.bdate {
        float: none;
        display: inline-block;
        margin-bottom: 14px;
    }

}

@media (max-width: 600px) {

    /* En-tête */
    #header::after {
        font-size: 20px;
    }

    #header h1 {
        text-align: center;
        margin: 0;
    }

    /* Menu sorties */
    #menu-sortie {
        margin: 20px 0 25px;
    }

    #menu-sortie ul {
        display: flex;
        width: 100%;
        gap: 8px;
    }

    #menu-sortie li {
        flex: 1;
        min-width: 100px;
    }

    #menu-sortie li a {
        text-align: center;
        padding: 12px;
    }

    /* Blog */
    div.billet {
        padding: 18px;
        border-radius: 16px;
    }

    .blog {
        margin-bottom: 45px;
    }

    .blog h3 {
        font-size: 1.45rem;
        gap: 8px;
        line-height: 1.25;
    }

    .blog h3::before {
        font-size: 1rem;
    }

    p.bdate {
        font-size: .78rem;
    }

    .annonces a {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

}

@media (max-width: 700px) {

    /* Cadres et images (commun) */
    .cadreDroite,
    .cadreGauche {
        float: none;
        display: block;
        margin: 25px auto;
        max-width: 320px;
    }

    .cadreCentre {
        display: block;
        max-width: 320px;
        margin: 25px auto;
    }

    .imgDroite,
    .imgGauche {
        float: none;
        margin: 20px auto;
    }

    /* Calendrier */
    #calendrier {
        border-spacing: 0 14px;
    }

    #calendrier tr {
        display: block;
    }

    #calendrier td {
        display: block;
        width: auto;
    }

    #calendrier td.caldate {
        border-right: 1px solid #ded7c8;
        border-radius: 12px 12px 0 0;
    }

    #calendrier td.caldescription {
        border-left: 1px solid #ded7c8;
        border-top: 0;
        border-radius: 0 0 12px 12px;
    }

    /* Gabarit général */
    #global {
        width: 100%;
        margin: 0;
        border-radius: 0;
        box-shadow: none;
    }

    #header {
        border-radius: 0;
        background-position: center 40%;
    }

    #header h1 {
        height: 140px;
        padding: 0;
        position: relative;
    }

    #header h1 a {
        width: 160px;
        height: 88px;

        background-size: 160px auto;

        left: 50%;
        right: auto;
        margin-left: -70px;

        top: 15px;
    }

    #menu {
        margin-top: -8px;
    }

    #menu ul {
        display: grid;
        grid-template-columns: repeat(3,1fr);
    }

    #menu li {
        width: auto;
    }

    #menu li a {
        padding: 10px 12px;
        font-size: 15px;
        font-weight: 600;
    }

    #menu li a::after {
        left: 12px;
        right: 12px;
    }

    #coeur {
        margin: 4px;
        padding: 8px;
    }

    div.billet {
        margin: 4px;
        padding: 8px;
    }

    img {
        max-width: 100%;
        height: auto !important;
    }

    img.imgDroite,
    img.imgGauche {
        float: none !important;
        display: block;
        margin: 15px auto !important;
    }

    table {
        display: block;
        overflow-x: auto;
        width: 100%;
    }

    /* Menu secondaire (bloc pages) */
    ul#menu-bp {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        float: none;
        width: auto;
        margin: 0 0 20px;
        padding: 0;
    }

    ul#menu-bp li {
        list-style: none;
        margin: 0;
    }

    ul#menu-bp li a {
        display: block;

        padding: 8px 14px;

        border-radius: 999px;

        background: #f4f4f0;

        border: 1px solid #d7ddd3;

        color: var(--green-text);

        text-decoration: none;

        font-weight: 600;
    }

    ul#menu-bp li.actif a {
        background: #419768;
        color: white;

        border-color: var(--green-text);
    }

    body.presentation #texte,
    body.presentation h2,
    body.boulaie #texte,
    body.boulaie h2 {
        margin: 0;
    }

}

/* HISTOIRE */

.article-histoire {
  display: flex;
  flex-wrap: wrap;
}

/* Desktop : photos à droite, texte à gauche, côte à côte */
.article-photos {
  order: 2;
  width: 260px;
  flex-shrink: 0;
  margin-left: 25px;
}

.article-texte {
  order: 1;
  flex: 1;
  min-width: 0;
}

.article-photos figure {
  margin: 0 0 20px 0;
  text-align: center;
  font-size: 0.85rem;
}

.article-photos img {
  width: 100%;
  height: auto;
  display: block;
}

.article-photos figcaption {
  margin-top: 6px;
}

.article-texte p {
  margin: 0 0 1em 0;
}

/* Mobile : tout passe en colonne, photos après le texte */
@media (max-width: 700px) {
  .article-histoire {
    flex-direction: column;
  }

  .article-photos {
    order: 2;
    width: 100%;
    margin: 20px 0 0 0;
  }

  .article-texte {
    order: 1;
  }
}