/* =====================================================================
   Pages de contenu (trek, safran, accès, FAQ, que faire, village, moto, groupes)
   Gabarits : views/templates/pages/fr/*.php, balise <main class="contenu-page">.

   En-tête orange comme les pages Chambres et Menu, puis un article sur fond crème,
   lisible sur téléphone d'abord. Titres en Rancho avec la fleur de safran, violet pour
   les liens, brun pour les actions, vert pour WhatsApp.
   ===================================================================== */

.contenu-page {
    --ct-fond: #fffaf3;
    --ct-orange: #e7a45c;
    --ct-papier: #fcefdc;
    --ct-encre: #3d2614;
    --ct-titre: #4a260b;
    --ct-texte: #4a3423;
    --ct-doux: #6e5340;
    --ct-brun: #7a4612;
    --ct-action: #a2631d;
    --ct-violet: #6f2a86;
    --ct-violet-fonce: #4f1a63;
    --ct-stigmate: #c8361d;
    --ct-filet: #f0dfc9;
    --ct-vert: #0e7a3e;
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    display: block;
    background: var(--ct-fond);
    color: var(--ct-texte);
    font-size: 1.0625rem;
    line-height: 1.7;
}
.contenu-page ::selection { background: var(--ct-violet); color: #fff; }
.contenu-page .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Liens du texte (l'emportent sur la règle historique a:link de style.css) */
.contenu-page a:link, .contenu-page a:visited {
    color: var(--ct-violet-fonce);
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
    text-decoration-color: rgba(79, 26, 99, .45);
    transition: color .15s ease, text-decoration-color .15s ease;
}
@media (hover: hover) and (pointer: fine) {
    .contenu-page a:hover { color: var(--ct-action); text-decoration-color: currentColor; }
}

/* ---------- En-tête de la page : titre, chapô, photo ---------- */
.contenu-tete {
    padding: 18px 16px 34px;
    background: var(--ct-orange);
    color: #4f2c10;
}
/* Pas de bandeau photo au-dessus : on laisse la place à l'en-tête du site (position absolue) */
#contenu + .contenu-page .contenu-tete { padding-top: calc(var(--hauteur-entete, 76px) + 14px); }
.contenu-tete-grille {
    display: grid; gap: 24px; align-items: center;
    max-width: 1180px; margin: 0 auto;
}
.contenu-tete-grille > * { min-width: 0; }

.fil-ariane ol { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0 0 10px; padding: 0; list-style: none; font-size: .88rem; }
.fil-ariane li { list-style: none; color: #5a3414; }
.fil-ariane li + li::before { content: '›'; margin: 0 8px; color: #7a4612; }
.contenu-page .fil-ariane a:link, .contenu-page .fil-ariane a:visited { color: var(--ct-encre); text-decoration-color: rgba(61, 38, 20, .4); }

.contenu-page h1 {
    display: flex; align-items: flex-start; gap: .18em;
    font-family: 'Rancho', cursive; font-weight: 400; letter-spacing: 0;
    font-size: clamp(2.6rem, 10.5vw, 4.6rem); line-height: .95; color: var(--ct-titre);
    text-wrap: balance;
}
.contenu-page h1 span { font-family: inherit; } /* style.css impose Poppins à tous les éléments */
.contenu-page h1 .fleur-titre { margin-top: .02em; }
.contenu-chapo { max-width: 46ch; margin-top: 14px; font-size: 1.08rem; line-height: 1.6; color: #4f2c10; }
.contenu-chapo strong { color: var(--ct-encre); font-weight: 600; }

.contenu-tete-photo {
    margin: 0; overflow: hidden; border-radius: 20px; aspect-ratio: 4 / 3; background: #c9853f;
    box-shadow: 0 18px 40px -22px rgba(74, 38, 11, .7);
}
.contenu-tete-photo picture, .contenu-tete-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.contenu-tete-photo figcaption { display: none; }
.contenu-tete-credit { margin-top: 8px; font-size: .78rem; color: #5a3414; }
.contenu-page .contenu-tete-credit a:link, .contenu-page .contenu-tete-credit a:visited { color: #5a3414; }

@media (min-width: 860px) {
    .contenu-tete { padding-bottom: 48px; }
    .contenu-tete-grille { grid-template-columns: 1.15fr .85fr; gap: 56px; }
    .contenu-tete-photo { transform: rotate(1.2deg); }
}

/* ---------- Boutons ---------- */
.contenu-boutons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.contenu-page a.bouton {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; padding: 0 22px; border-radius: 999px;
    font-size: 1rem; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none;
    transition: background-color .2s ease, transform .16s ease-out, box-shadow .2s ease;
}
.contenu-page a.bouton:active { transform: scale(.97); }
.contenu-page a.bouton-whatsapp { background: var(--ct-vert); color: #fff; box-shadow: 0 8px 18px -12px rgba(14, 122, 62, .9); }
.contenu-page a.bouton-reserver { background: var(--ct-action); color: #fff; box-shadow: 0 8px 18px -12px rgba(122, 70, 18, .95); }
.contenu-page a.bouton-clair { background: var(--ct-fond); color: var(--ct-brun); box-shadow: inset 0 0 0 1.5px rgba(122, 70, 18, .35); }
.contenu-page .bouton .icone-whatsapp { width: 22px; height: 22px; flex: none; }
@media (hover: hover) and (pointer: fine) {
    .contenu-page a.bouton-whatsapp:hover { background: #0b6532; color: #fff; }
    .contenu-page a.bouton-reserver:hover { background: var(--ct-brun); color: #fff; }
    .contenu-page a.bouton-clair:hover { background: #fff; color: var(--ct-brun); box-shadow: inset 0 0 0 1.5px var(--ct-brun); }
}

/* ---------- Corps : sommaire et article ---------- */
.contenu-corps { max-width: 1180px; margin: 0 auto; padding: 30px 16px 8px; }
.contenu-corps > * { min-width: 0; }
.contenu-texte { max-width: 72ch; }
.contenu-corps:not(.avec-sommaire) .contenu-texte { margin: 0 auto; }

.sommaire {
    margin: 0 0 30px; padding: 16px 18px 14px; border-radius: 16px;
    background: var(--ct-papier); border: 1px solid var(--ct-filet);
}
.sommaire-titre { margin: 0 0 6px; font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ct-brun); }
.sommaire ol { margin: 0; padding: 0; list-style: none; counter-reset: sommaire; }
.sommaire li { list-style: none; counter-increment: sommaire; }
.contenu-page .sommaire a:link, .contenu-page .sommaire a:visited {
    display: flex; gap: 10px; padding: 7px 0; font-size: .97rem; line-height: 1.35;
    color: var(--ct-encre); text-decoration: none;
}
.sommaire a::before { content: counter(sommaire); flex: none; min-width: 1.4em; font-weight: 600; color: var(--ct-violet); font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) {
    .contenu-page .sommaire a:hover { color: var(--ct-violet); text-decoration: underline; text-underline-offset: 3px; }
}
@media (min-width: 1024px) {
    .contenu-corps { padding-top: 48px; }
    .contenu-corps.avec-sommaire { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 56px; align-items: start; }
    .avec-sommaire .sommaire { position: sticky; top: calc(var(--entete-compacte, 0px) + 24px); margin: 6px 0 0; }
}

/* ---------- Titres et texte de l'article ---------- */
.contenu-texte > section, .contenu-texte > .en-bref { scroll-margin-top: calc(var(--entete-compacte, 0px) + 16px); }
.contenu-texte h2 {
    margin: 1.8em 0 .4em;
    font-family: 'Rancho', cursive; font-weight: 400; letter-spacing: 0;
    font-size: clamp(2.1rem, 6.5vw, 2.75rem); line-height: 1.02; color: var(--ct-titre);
    text-wrap: balance;
}
.contenu-texte > section:first-child h2, .contenu-texte > .en-bref + section h2 { margin-top: 1.2em; }
.contenu-texte h3 {
    margin: 1.6em 0 .35em;
    font-size: 1.18rem; font-weight: 600; line-height: 1.35; color: var(--ct-brun);
}
.contenu-texte p { margin: 0 0 1em; }
.contenu-texte strong { color: var(--ct-encre); font-weight: 600; }
.contenu-texte ul, .contenu-texte ol { margin: 0 0 1.1em; padding: 0; list-style: none; }
.contenu-texte ul > li { position: relative; margin: 0 0 .45em; padding-left: 1.35em; list-style: none; }
.contenu-texte ul > li::before {
    content: ''; position: absolute; left: .2em; top: .62em;
    width: .48em; height: .48em; border-radius: 50% 0 50% 0; background: var(--ct-violet); transform: rotate(45deg);
}
.contenu-texte ol { counter-reset: liste; }
.contenu-texte ol > li { position: relative; margin: 0 0 .55em; padding-left: 2.1em; list-style: none; counter-increment: liste; }
.contenu-texte ol > li::before {
    content: counter(liste); position: absolute; left: 0; top: .1em;
    display: grid; place-items: center; width: 1.55em; height: 1.55em; border-radius: 50%;
    background: var(--ct-action); color: #fff; font-size: .88em; font-weight: 600; line-height: 1;
}
.contenu-texte .source { font-size: .85rem; color: var(--ct-doux); }

/* Petites notes de source à la fin d'un paragraphe */
.contenu-texte sup a:link, .contenu-texte sup a:visited { text-decoration: none; font-size: .8em; }

/* ---------- En bref (faits clés) ---------- */
.en-bref {
    display: grid; grid-template-columns: 1fr; gap: 0; margin: 0 0 8px;
    border-top: 2px solid var(--ct-orange);
}
.en-bref div { display: grid; grid-template-columns: minmax(0, 9.5em) minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--ct-filet); }
.en-bref dt { font-size: .88rem; font-weight: 600; letter-spacing: .02em; color: var(--ct-brun); }
.en-bref dd { margin: 0; font-size: .97rem; line-height: 1.5; color: var(--ct-encre); }
@media (min-width: 640px) {
    .en-bref { grid-template-columns: 1fr 1fr; column-gap: 28px; }
}

/* ---------- Encadrés « Bon à savoir » ---------- */
.encadre {
    margin: 1.4em 0 1.6em; padding: 16px 18px 6px; border-radius: 16px;
    background: var(--ct-papier); border-left: 4px solid var(--ct-orange);
}
.encadre-titre { display: flex; align-items: center; gap: 8px; margin: 0 0 .35em !important; font-weight: 600; color: var(--ct-brun); }
.encadre-titre svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.encadre-violet { background: #f5ecf7; border-left-color: var(--ct-violet); }
.encadre-violet .encadre-titre { color: var(--ct-violet-fonce); }

/* ---------- Photos dans le texte ---------- */
.contenu-figure { margin: 1.6em 0 1.8em; }
.contenu-figure picture, .contenu-figure img { display: block; width: 100%; height: auto; border-radius: 16px; background: var(--ct-papier); }
.contenu-figure figcaption { margin-top: 8px; font-size: .88rem; line-height: 1.5; color: var(--ct-doux); }

/* ---------- Tableau ---------- */
.tableau-defile { margin: 1.2em 0 1.6em; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 14px; border: 1px solid var(--ct-filet); }
.tableau-defile:focus-visible { outline: 3px solid var(--ct-action); outline-offset: 2px; }
.contenu-texte table { width: 100%; min-width: 32rem; border-collapse: collapse; font-size: .95rem; line-height: 1.5; }
.contenu-texte caption { padding: 12px 14px 4px; text-align: left; font-size: .85rem; color: var(--ct-doux); caption-side: bottom; }
.contenu-texte th, .contenu-texte td { padding: 11px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--ct-filet); }
.contenu-texte thead th { background: var(--ct-papier); font-size: .85rem; font-weight: 600; letter-spacing: .02em; color: var(--ct-brun); }
.contenu-texte tbody th { font-weight: 600; color: var(--ct-encre); }
.contenu-texte tbody tr:last-child th, .contenu-texte tbody tr:last-child td { border-bottom: 0; }
.contenu-texte tfoot td, .contenu-texte tfoot th { background: var(--ct-papier); font-weight: 600; color: var(--ct-encre); border-bottom: 0; }
.contenu-texte td.nombre, .contenu-texte th.nombre { text-align: right; font-variant-numeric: tabular-nums; }
.contenu-texte table.tableau-etroit { min-width: 0; }
.contenu-texte .tableau-etroit th, .contenu-texte .tableau-etroit td { padding: 10px 12px; }

/* ---------- Étapes d'un itinéraire ---------- */
.contenu-texte ol.etapes > li { padding-bottom: .4em; }

/* ---------- Coordonnées (adresse, GPS) ---------- */
.coordonnees {
    display: grid; gap: 4px; margin: 1em 0 1.4em; padding: 16px 18px; border-radius: 16px;
    background: #fff; border: 1px solid var(--ct-filet); box-shadow: 0 10px 24px -20px rgba(74, 38, 11, .6);
}
.coordonnees p, .coordonnees address { margin: 0; font-style: normal; }
.coordonnees .gps { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ct-encre); letter-spacing: .01em; }
.coordonnees .contenu-boutons { margin-top: 12px; }

/* ---------- Questions fréquentes (<details>) ---------- */
.faq-liste { margin: .4em 0 1.4em; border-top: 1px solid var(--ct-filet); }
.faq-liste details { border-bottom: 1px solid var(--ct-filet); }
.faq-liste summary {
    position: relative; display: block; padding: 15px 44px 15px 0; cursor: pointer; list-style: none;
    font-weight: 600; line-height: 1.45; color: var(--ct-encre);
    transition: color .15s ease;
}
.faq-liste summary::-webkit-details-marker { display: none; }
.faq-liste summary::before, .faq-liste summary::after {
    content: ''; position: absolute; right: 12px; top: 50%; width: 14px; height: 2px; margin-top: -1px;
    border-radius: 2px; background: var(--ct-action); transition: transform .22s var(--ease-out);
}
.faq-liste summary::after { transform: rotate(90deg); }
.faq-liste details[open] > summary { color: var(--ct-violet-fonce); }
.faq-liste details[open] > summary::after { transform: rotate(0deg); }
.faq-liste summary:focus-visible { outline: 3px solid var(--ct-action); outline-offset: 2px; border-radius: 6px; }
@media (hover: hover) and (pointer: fine) {
    .faq-liste summary:hover { color: var(--ct-violet-fonce); }
}
.faq-reponse { padding: 0 0 10px; }
.faq-reponse p { margin: 0 0 .7em; }
.faq-liste details[open] .faq-reponse { animation: faq-ouvre .25s var(--ease-out); }
@keyframes faq-ouvre { from { opacity: 0; transform: translateY(-4px); } }

/* ---------- À lire aussi (liens vers d'autres pages) ---------- */
.liens-cartes { display: grid; gap: 12px; margin: 1em 0 1.6em; padding: 0; list-style: none; }
.contenu-texte .liens-cartes > li { margin: 0; padding: 0; }
.contenu-texte .liens-cartes > li::before { display: none; }
@media (min-width: 640px) { .liens-cartes { grid-template-columns: 1fr 1fr; } }
.contenu-page .liens-cartes a:link, .contenu-page .liens-cartes a:visited {
    display: block; height: 100%; padding: 14px 16px; border-radius: 14px;
    background: #fff; border: 1px solid var(--ct-filet); text-decoration: none; color: var(--ct-texte);
    transition: border-color .2s ease, box-shadow .2s ease, transform .16s ease-out;
}
.liens-cartes strong { display: block; margin-bottom: 2px; color: var(--ct-violet-fonce); font-weight: 600; }
.liens-cartes span { display: block; font-size: .93rem; line-height: 1.5; color: var(--ct-doux); }
.contenu-page .liens-cartes a:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) {
    .contenu-page .liens-cartes a:hover { border-color: var(--ct-violet); box-shadow: 0 12px 24px -20px rgba(79, 26, 99, .8); }
}

/* ---------- Appel à l'action en fin de page ---------- */
.appel-action {
    display: grid; justify-items: center; gap: 8px; max-width: 1180px; margin: 36px auto 8px; padding: 30px 20px 28px;
    border-radius: 24px; background: var(--ct-orange); color: #4f2c10; text-align: center;
}
.appel-action-fleur { width: 44px; height: 44px; }
.appel-action h2 {
    font-family: 'Rancho', cursive; font-weight: 400; letter-spacing: 0;
    font-size: clamp(2.2rem, 7vw, 3rem); line-height: 1; color: var(--ct-titre); text-wrap: balance;
}
.appel-action p { max-width: 52ch; margin: 0; line-height: 1.6; }
.appel-action .contenu-boutons { justify-content: center; margin-top: 10px; }
.appel-action-tel { font-size: .95rem; }
.contenu-page .appel-action-tel a:link, .contenu-page .appel-action-tel a:visited { color: var(--ct-encre); font-weight: 600; }
.contenu-page > .appel-action { margin-left: 16px; margin-right: 16px; }
@media (min-width: 1212px) { .contenu-page > .appel-action { margin-left: auto; margin-right: auto; } }

/* ---------- Réduire les animations ---------- */
@media (prefers-reduced-motion: reduce) {
    .contenu-page *, .contenu-page *::before, .contenu-page *::after { transition: none !important; animation: none !important; }
    .contenu-tete-photo { transform: none; }
}