/*
Theme Name: Un Monde Tanzanie
*/

/* ==========================================================================
   UN MONDE TANZANIE — V2, 15/09/2026 (retours Mathias RETOURS-MATHIAS-1509.md).
   Palette SAVANE (remplace la palette magenta refusée) : mode clair uniquement
   (CM-0417 : aucun bouton, aucun media prefers-color-scheme, aucun [data-theme]).
   Polices self-hostees (P-086) : fichiers attendus dans assets/fonts/.
   ========================================================================== */

/* ---------- 0. POLICES (self-hosted, woff2) ------------------------------ */
@font-face{
  font-family:'Gloock';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/Gloock-Regular.woff2') format('woff2');
}
@font-face{
  font-family:'Red Hat Text';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/RedHatText-Regular.woff2') format('woff2');
}
@font-face{
  font-family:'Red Hat Text';font-style:normal;font-weight:500;font-display:swap;
  src:url('assets/fonts/RedHatText-Medium.woff2') format('woff2');
}
@font-face{
  font-family:'Red Hat Text';font-style:normal;font-weight:700;font-display:swap;
  src:url('assets/fonts/RedHatText-Bold.woff2') format('woff2');
}
@font-face{
  font-family:'Red Hat Text';font-style:italic;font-weight:400;font-display:swap;
  src:url('assets/fonts/RedHatText-Italic.woff2') format('woff2');
}
@font-face{
  font-family:'Red Hat Display';font-style:normal;font-weight:500;font-display:swap;
  src:url('assets/fonts/RedHatDisplay-Medium.woff2') format('woff2');
}
@font-face{
  font-family:'Red Hat Display';font-style:normal;font-weight:700;font-display:swap;
  src:url('assets/fonts/RedHatDisplay-Bold.woff2') format('woff2');
}

/* ---------- 1. JETONS — palette SAVANE, clair uniquement ------------------
   Mapping (15/09/2026, retour Mathias) : NOMS conservés pour l'autre designer,
   VALEURS recolorees. --second et --detail sont deux jetons AJOUTES (5 couleurs
   Savane demandees explicitement : fond/encre/accent/second/detail — deroge au
   defaut reseau "1 accent" P-116 sur decision documentee de Mathias pour CE site). */
:root{
  --natron:#F4EDE1;        /* fond — sable */
  --feuille:#FAF6EC;       /* fond clair secondaire (cartes, formulaire) */
  --kopje:#CBB98C;         /* bande intermediaire — tan */
  --encre:#2A2118;         /* encre — brun nuit */
  --sourde:#5C4A38;        /* texte secondaire sur fond clair (7.2:1 sur natron) */
  --filet:#E4D6BC;         /* bordures claires */
  --cendre:#24190F;        /* fond sombre (bandes, pied, en-tete au survol) */
  --cendre-haute:#34281C;  /* fond sombre, un ton au-dessus */
  --ecume:#F7F0E2;         /* texte clair sur fond sombre (15.2:1 sur cendre) */
  --sourde-nuit:#C7B08A;   /* texte secondaire sur fond sombre (8.2:1 sur cendre) */
  --kanga:#B5542B;         /* accent — terre rouge (4.6:1 texte blanc dessus) */
  --kanga-fonce:#8F3F1F;   /* accent, survol/actif */
  --kanga-clair:#D9A441;   /* detail — herbe seche, accent secondaire sur fond sombre */
  --second:#3F5B3A;        /* second — vert acacia (cartes, badges non-conversion) */
  --detail:#D9A441;        /* alias explicite du detail (= --kanga-clair) */
  --detail-fonce:#C08F35;  /* detail, survol */

  --titre:'Gloock', Georgia, serif;
  --corps:'Red Hat Text', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --display:'Red Hat Display', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;

  --u-rayon:2px;
  --u-tete-h:76px;
  --u-pad-desktop:120px;
  --u-pad-mobile:72px;
  color-scheme:light;
}
/* CM-0417 — mode clair uniquement : ni bouton, ni media prefers-color-scheme,
   ni [data-theme] sur ce site. Les bandes "sombres" sont des sections a fond
   fonce fixe (jetons ci-dessus), pas un theme alternatif. */
.u-bascule,.sb-bascule,.sn-bascule{display:none!important}

/* ---------- 2. RESET / SOCLE ---------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
/* Fond de secours sombre (= pied de page) : sur la capture pleine page, une fine bande
   claire trainait sous le pied (repere expert-design 14/09) — le pied est la derniere chose
   visible en bas de toutes les pages, jamais du natron clair une fois qu'on l'a depasse. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--cendre)}
body{margin:0;background:var(--natron);color:var(--encre);
  font-family:var(--corps);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--titre);font-weight:400;margin:0;line-height:1.1;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--kanga);outline-offset:2px}
.u-oeil{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.u-oeil:focus{left:.6rem;top:.6rem;width:auto;height:auto;padding:.6rem 1rem;
  background:var(--encre);color:var(--ecume);z-index:999;border-radius:var(--u-rayon)}

/* ---------- 3. GRILLE / ENVELOPPES ---------------------------------------- */
.u-wrap{width:min(1180px, 100% - 40px);margin-inline:auto}
.u-bande{padding-block:var(--u-pad-desktop)}
@media (max-width:780px){.u-bande{padding-block:var(--u-pad-mobile)}}
.u-bande--claire{background:var(--natron)}
.u-bande--feuille{background:var(--feuille)}
.u-bande--kopje{background:var(--kopje);color:var(--encre)}
.u-bande--sombre{background:var(--cendre);color:var(--ecume)}
.u-sur-titre{font-family:var(--display);font-weight:700;font-size:13px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--sourde)}
.u-bande--sombre .u-sur-titre{color:var(--sourde-nuit)}
/* Interdit palette : sourde/kopje illisible. Le sur-titre sur B3 passe en encre. */
.u-bande--kopje .u-sur-titre{color:var(--encre)}
.u-h2{font-size:clamp(34px,4vw + 14px,52px);margin-top:.5rem}
.u-h2--centre{text-align:center}
.u-corps-lg{font-size:18px;line-height:1.65}
@media (max-width:780px){.u-corps-lg{font-size:17px}}
.u-tete-bande{text-align:left;max-width:56ch}
.u-tete-bande--centre{text-align:center;max-width:44ch;margin-inline:auto}

/* Apparition douce des titres de bande (une fois) */
.u-apparait{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.u-apparait.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .u-apparait{opacity:1;transform:none;transition:none}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ---------- 4. LIEN CERCLE-FLECHE (unique style de lien secondaire) ------ */
.u-lien-cercle{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--display);
  font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.u-lien-cercle:hover{text-decoration:none}
.u-lien-cercle .u-cercle{display:inline-grid;place-items:center;width:36px;height:36px;
  border-radius:50%;border:1.5px solid currentColor;flex:none;transition:transform .25s ease}
.u-lien-cercle .u-cercle svg{width:14px;height:14px;transition:transform .25s ease}
.u-lien-cercle:hover .u-cercle svg{transform:translateX(4px)}
.u-lien-cercle--accent{color:var(--kanga)}
.u-bande--sombre .u-lien-cercle--accent,.u-sur-photo .u-lien-cercle--accent{color:var(--kanga-clair)}

/* ---------- 5. BOUTONS ------------------------------------------------------ */
.u-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.04em;
  padding:.95rem 1.7rem;border-radius:var(--u-rayon);border:1.5px solid transparent;
  cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease;
  white-space:nowrap}
.u-btn--pleine{background:var(--kanga);color:var(--feuille)}
.u-btn--pleine:hover,.u-btn--pleine:focus-visible{background:var(--kanga-fonce)}
.u-btn--pleine-claire{background:var(--kanga-clair);color:var(--encre)}
.u-btn--pleine-claire:hover,.u-btn--pleine-claire:focus-visible{background:var(--detail-fonce)}
.u-btn-txt-court{display:none}
.u-btn--filaire{border-color:currentColor;background:transparent}
.u-btn--large{width:100%}
.u-btn svg{width:14px;height:14px;flex:none}

/* ---------- 6. EN-TETE — B0 ------------------------------------------------ */
.u-tete{position:fixed;inset-inline:0;top:0;z-index:80;height:var(--u-tete-h);
  display:flex;align-items:center;background:var(--natron);
  border-bottom:1px solid var(--filet);transition:background .25s ease,border-color .25s ease}
.u-tete--survol{background:linear-gradient(to bottom, rgba(36,25,15,.55) 0%, rgba(36,25,15,.16) 100%);
  border-color:transparent;color:var(--ecume)}
html.u-scroll .u-tete--survol{background:var(--natron);color:var(--encre);border-color:var(--filet)}
.u-tete-in{display:flex;align-items:center;gap:1.4rem;width:min(1180px, 100% - 40px);margin-inline:auto}
.u-marque{display:flex;align-items:center;gap:.65rem;font-family:var(--display);
  font-weight:700;font-size:15px;letter-spacing:.04em;flex:none}
.u-marque .u-logo{width:38px;height:auto;flex:none;color:currentColor}
.u-nav{display:flex;align-items:center;gap:1.6rem;margin-inline:auto;flex-wrap:nowrap;min-width:0}
.u-nav a{font-family:var(--display);font-size:15px;font-weight:500;letter-spacing:.01em;
  display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap;flex:none}
.u-nav a:hover{text-decoration:underline;text-underline-offset:4px}
.u-nav .u-nav-puce{width:6px;height:6px;border-radius:50%;background:var(--kanga);flex:none;opacity:0}
.u-nav a.is-actif .u-nav-puce{opacity:1}
.u-burger{display:none;flex:none;width:32px;height:32px;position:relative}
.u-burger span{position:absolute;left:4px;right:4px;height:2px;background:currentColor;transition:transform .2s ease,opacity .2s ease}
.u-burger span:nth-child(1){top:10px}
.u-burger span:nth-child(2){top:16px}
.u-burger span:nth-child(3){top:22px}
.u-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.u-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.u-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (max-width:1100px){
  .u-nav{position:fixed;inset:var(--u-tete-h) 0 0 0;background:var(--natron);color:var(--encre);
    flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0;
    padding:1.5rem 20px;transform:translateY(-8px);opacity:0;visibility:hidden;
    transition:opacity .2s ease,transform .2s ease,visibility .2s}
  .u-nav.is-ouvert{opacity:1;transform:none;visibility:visible}
  .u-nav a{width:100%;padding:1rem 0;border-bottom:1px solid var(--filet);font-size:17px}
  .u-burger{display:block}
  .u-marque{margin-inline:auto}
  .u-tete-in{position:relative}
  .u-tete .u-btn{font-size:12px;padding:.6rem .9rem;letter-spacing:.02em;flex:none;margin-right:2px}
  .u-btn-cta .u-btn-txt-long{display:none}
  .u-btn-cta .u-btn-txt-court{display:inline}
}
@media (max-width:420px){
  .u-marque .u-logo{width:30px}
  .u-tete .u-marque span{font-size:12px;line-height:1.15}
  .u-tete .u-btn{font-size:11px;padding:.5rem .6rem}
}

/* ---------- 7. HERO — B1 ---------------------------------------------------- */
.u-hero{position:relative;min-height:100vh;display:flex;align-items:flex-end;
  margin-top:calc(-1 * var(--u-tete-h));padding-top:var(--u-tete-h)}
@media (max-width:780px){.u-hero{min-height:88vh}}
.u-hero-photo{position:absolute;inset:0;z-index:-2}
.u-hero-photo img{width:100%;height:100%;object-fit:cover}
.u-hero-voile{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top, rgba(36,25,15,.88) 0%, rgba(36,25,15,.58) 45%, rgba(36,25,15,.22) 78%, rgba(36,25,15,.32) 100%)}
.u-hero-in{padding-block:3.5rem 2.5rem;color:var(--ecume)}
.u-hero-surtitre{color:var(--ecume);opacity:.9}
.u-hero h1{font-size:clamp(44px,5vw + 18px,76px);color:var(--ecume);margin-top:.6rem;max-width:16ch}
.u-hero-chapo{margin-top:1.1rem;font-size:19px;max-width:52ch;color:var(--ecume);opacity:.92}
@media (max-width:780px){.u-hero-chapo{font-size:17px}}

/* ---------- 8. FORMULAIRE DE DEMANDE (barre + etape 2) -------------------- */
.u-form{background:var(--feuille);color:var(--encre);margin-top:2.2rem;
  border-radius:var(--u-rayon);box-shadow:0 18px 44px rgba(18,12,7,.28)}
/* Grille responsive : les 4 champs (Quand/Voyageurs/Budget/Envies) n'ont pas le
   meme besoin de largeur — a fractions egales, la colonne Budget etait trop
   etroite et ses pastilles debordaient sur la colonne Enfants voisine (verdict
   14/09). Fractions proportionnelles au contenu reel + colonne unique <=780px. */
.u-form-barre{display:grid;grid-template-columns:1fr}
@media (min-width:781px){
  .u-form-barre{grid-template-columns:.85fr 1fr 1.15fr 1.3fr}
}
.u-champ{padding:.9rem 1.2rem;border-right:1px solid var(--filet);min-width:0}
.u-champ:last-of-type{border-right:0}
@media (max-width:780px){.u-champ{border-right:0;border-bottom:1px solid var(--filet)}}
.u-champ label{display:block;font-family:var(--display);font-size:12px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--sourde);margin-bottom:.35rem}
.u-champ select,.u-champ input[type="text"],.u-champ input[type="email"],.u-champ input[type="tel"]{
  width:100%;border:0;background:transparent;font-size:16px;padding:0;color:var(--encre)}
.u-champ select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%235C4A38' stroke-width='1.6' fill='none'/></svg>");
  background-repeat:no-repeat;background-position:right center;padding-right:1.2rem}

/* Compteurs Adultes / Enfants — EMPILES (correction verdict 14/09 : la ligne
   Enfants chevauchait la colonne Budget parce que ce conteneur etait en ligne
   au lieu d'etre empile). */
.u-compteur{display:flex;flex-direction:column;align-items:stretch;gap:.55rem}
.u-compteur-ligne{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.u-compteur-ligne span:first-child{font-size:14px;color:var(--sourde)}
.u-compteur-btns{display:flex;align-items:center;gap:.5rem}
.u-compteur-btns button{width:24px;height:24px;border:1px solid var(--filet);border-radius:50%;
  display:grid;place-items:center;line-height:1;font-size:15px;flex:none}
.u-compteur-btns button:hover{border-color:var(--kanga);color:var(--kanga)}
.u-compteur-val{min-width:1.4em;text-align:center;font-variant-numeric:tabular-nums}

.u-envies{display:flex;flex-wrap:wrap;gap:.4rem .8rem}
.u-envies label{display:inline-flex;align-items:center;gap:.4rem;font-size:13px;color:var(--encre);
  font-family:var(--corps);text-transform:none;letter-spacing:0;font-weight:400}
.u-envies input[type="checkbox"]{accent-color:var(--kanga);width:15px;height:15px}

/* Zone d'action : bouton "Continuer" en pleine largeur sous les 4 champs — plus
   de colonne dediee au bouton (verdict 14/09 : "colonne vide avec bouton flottant"). */
.u-form-action{padding:1.2rem 1.6rem 1.5rem;border-top:1px solid var(--filet);text-align:center}
.u-form-action-btn{width:100%;font-size:15px;padding:1.05rem 1.7rem}
.u-form-action-note{margin-top:.6rem;font-size:12px;color:var(--sourde)}

.u-form-etape2{display:grid;gap:1rem;padding:1.6rem;border-top:1px solid var(--filet)}
.u-form-etape2[hidden]{display:none}
.u-form-ligne{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:600px){.u-form-ligne{grid-template-columns:1fr}}
.u-form-etape2 label{display:block;font-family:var(--display);font-size:12px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--sourde);margin-bottom:.35rem}
.u-form-etape2 input,.u-form-etape2 textarea{width:100%;border:1px solid var(--filet);
  border-radius:var(--u-rayon);padding:.7rem .8rem;background:var(--feuille)}
.u-form-etape2 input:focus,.u-form-etape2 textarea:focus{border-color:var(--kanga)}
.u-consentement{display:flex;align-items:flex-start;gap:.6rem;font-size:13px;color:var(--sourde)}
.u-consentement input{accent-color:var(--kanga);margin-top:.2rem;flex:none}
/* 15/09 retour Mathias : la regle des libelles (capitales, bloc) ecrasait la case de consentement */
.u-form-etape2 label.u-consentement{display:flex;align-items:flex-start;gap:.6rem;font-family:var(--corps);font-size:12.5px;
  font-weight:400;line-height:1.45;letter-spacing:0;text-transform:none;color:var(--sourde);margin:0}
.u-form-etape2 .u-consentement input{width:16px;height:16px;padding:0;margin-top:.15em}
.u-progression{display:flex;gap:.4rem;padding:1.1rem 1.6rem 0}
.u-progression span{flex:1;height:3px;background:var(--filet);border-radius:2px}
.u-progression span.is-faite{background:var(--kanga)}
.u-erreur{display:flex;align-items:center;gap:.5rem;font-size:13px;color:var(--encre);
  border-left:3px solid var(--encre);padding:.4rem .7rem;background:var(--natron);margin-top:.4rem}
.u-erreur[hidden]{display:none}
.u-form-retour{padding:.4rem 1.6rem 0}
.u-form-retour button{font-family:var(--display);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--sourde)}
.u-confirmation{padding:2rem 1.6rem;text-align:center}
.u-confirmation[hidden]{display:none}
.u-confirmation h3{font-size:22px}
.u-confirmation p{margin-top:.6rem;color:var(--sourde)}
.u-piege{position:absolute;left:-9999px}
.u-form--reduit .u-form-etape2{border-top:0;padding:1.4rem}
.u-form--reduit{box-shadow:none;border:1px solid var(--filet)}

/* Boucle de la migration (champ "Quand ?") — MODALE centree (verdict 14/09 :
   panneau ancre au champ -> overlay + boite centrees, fermeture Echap/clic
   dehors/bouton, focus piege en JS). */
.u-mois-select{position:relative}
.u-boucle-decl{margin-top:.3rem;font-size:12px;color:var(--kanga);font-family:var(--display);
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;display:inline-flex;gap:.3rem;align-items:center}
.u-boucle-voile{position:fixed;inset:0;z-index:190;background:rgba(20,13,7,.6)}
.u-boucle-voile[hidden]{display:none}
.u-boucle-panneau{position:fixed;z-index:200;top:50%;left:50%;transform:translate(-50%,-50%);
  background:var(--feuille);border:1px solid var(--filet);border-radius:var(--u-rayon);
  box-shadow:0 24px 60px rgba(18,12,7,.4);padding:1.7rem;width:min(380px,calc(100vw - 32px));
  max-height:85vh;overflow:auto}
.u-boucle-panneau[hidden]{display:none}
.u-boucle-titre{font-size:20px;padding-right:1.8rem}
.u-boucle-fermer-x{position:absolute;top:.7rem;right:.7rem;width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;font-size:15px;line-height:1;color:var(--sourde)}
.u-boucle-fermer-x:hover{background:var(--natron);color:var(--encre)}
.u-boucle-svg{width:100%;height:auto;margin-top:.6rem}
.u-boucle-svg circle.u-mois-pt{fill:var(--feuille);stroke:var(--sourde);stroke-width:1.4;cursor:pointer;transition:fill .15s ease,stroke .15s ease}
.u-boucle-svg circle.u-mois-pt:hover{stroke:var(--kanga)}
.u-boucle-svg circle.u-mois-pt.is-actif{fill:var(--kanga);stroke:var(--kanga)}
.u-boucle-svg text{font-family:var(--display);font-size:9px;font-weight:700;fill:var(--sourde);pointer-events:none}
.u-boucle-svg text.is-actif{fill:var(--kanga)}
.u-boucle-svg path.u-trace{fill:none;stroke:var(--filet);stroke-width:2;stroke-dasharray:3 4}
.u-boucle-resultat{margin-top:.8rem;font-size:13px;color:var(--encre);min-height:2.4em}
.u-boucle-resultat:empty::before{content:"Choisissez un mois pour voir où sont les troupeaux.";color:var(--sourde)}
.u-boucle-ne-sais-pas{margin-top:.6rem;font-size:12px;color:var(--sourde);text-decoration:underline;text-underline-offset:3px}

/* Tranches de budget — une colonne (chaque pill prend toute la largeur du champ,
   jamais 2 colonnes qui debordent sur le champ voisin, cf. verdict 14/09). */
.u-budget{display:grid;grid-template-columns:1fr;gap:.4rem;margin-top:.2rem}
.u-budget label{border:1px solid var(--filet);border-radius:var(--u-rayon);padding:.4rem .6rem;
  font-size:12px;text-align:left;white-space:nowrap;cursor:pointer;transition:border-color .15s ease,color .15s ease}
.u-budget input{position:absolute;opacity:0;pointer-events:none}
.u-budget input:checked + span{color:var(--kanga)}
.u-budget label:has(input:checked){border-color:var(--kanga)}
.u-budget-note{margin-top:.4rem;font-size:11px;color:var(--sourde)}

/* ---------- 9. BANDE B2 — COMMENT CA MARCHE (sombre) ----------------------- */
.u-comment{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center}
@media (max-width:900px){.u-comment{grid-template-columns:1fr}}
.u-etapes{margin-top:1.6rem;display:grid;gap:1.4rem}
.u-etape{display:flex;gap:1rem;align-items:flex-start}
.u-etape .u-glyphe{width:26px;height:26px;flex:none;color:var(--kanga-clair);margin-top:.2rem}
.u-etape h3{font-size:19px;color:var(--ecume);font-weight:400}
.u-etape p{margin-top:.3rem;color:var(--sourde-nuit);font-size:15px}
.u-comment-photo{position:relative;aspect-ratio:3/4;overflow:hidden}
.u-comment-photo img{width:100%;height:100%;object-fit:cover}

/* Jina de kanga — un seul cartouche par page */
.u-jina{margin-top:2.4rem;padding:1.6rem 1.8rem;border:1px solid var(--kanga-clair);position:relative}
.u-jina::before{content:"";position:absolute;left:0;right:0;top:0;height:12px;
  background-image:repeating-linear-gradient(45deg, var(--kanga-clair) 0 2px, transparent 2px 8px);
  opacity:.7}
.u-jina p.u-jina-txt{font-family:var(--titre);font-size:26px;color:var(--ecume);line-height:1.3}
.u-jina p.u-jina-trad{margin-top:.6rem;font-style:italic;font-size:14px;color:var(--sourde-nuit)}

/* ---------- 10. BANDE B3 — DESTINATIONS (kopje) ---------------------------- */
.u-destinations{display:grid;gap:8px;margin-top:2.4rem}
.u-dest{position:relative;height:150px;overflow:hidden;display:flex;align-items:center;
  justify-content:center;transition:height .3s ease}
@media (max-width:780px){.u-dest{height:120px}}
.u-dest img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.u-dest::after{content:"";position:absolute;inset:0;background:rgba(36,25,15,.5)}
.u-dest-in{position:relative;z-index:1;text-align:center;color:var(--ecume)}
.u-dest-local{display:block;font-family:var(--display);font-weight:700;font-size:15px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--kanga-clair)}
.u-dest-fr{display:block;font-family:var(--titre);font-size:26px;margin-top:.2rem}
.u-dest-hover{max-height:0;opacity:0;overflow:hidden;transition:max-height .3s ease,opacity .3s ease;margin-top:.5rem}
.u-dest:hover{height:260px}
@media (hover:hover){.u-dest:hover .u-dest-hover{max-height:80px;opacity:1}}
.u-dest-hover p{font-size:13px;color:var(--ecume);opacity:.9}
.u-dest-envie{margin-top:.5rem;font-family:var(--display);font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--kanga-clair);border:1px solid var(--kanga-clair);
  padding:.4rem .8rem;display:inline-block;border-radius:var(--u-rayon)}
.u-dest-envie:hover{background:var(--kanga-clair);color:var(--encre)}

/* ---------- 10bis. BANDE — CARTE INTERACTIVE DE LA TANZANIE ---------------- */
.u-carte-tanzanie{display:grid;grid-template-columns:1.3fr 1fr;gap:2.4rem;align-items:start;margin-top:2.6rem}
@media (max-width:900px){.u-carte-tanzanie{grid-template-columns:1fr}}
.u-carte-svg{width:100%;height:auto;background:var(--feuille);border:1px solid var(--filet)}
.u-carte-mainland{fill:var(--natron);stroke:var(--sourde-nuit);stroke-width:1.6}
.u-carte-lac{fill:var(--second);opacity:.2}
.u-carte-ile{fill:var(--kopje);stroke:var(--sourde);stroke-width:1}
.u-carte-repere circle{fill:var(--sourde)}
.u-carte-repere text{font-family:var(--display);font-size:9px;fill:var(--sourde)}
.u-carte-point{cursor:pointer}
.u-carte-point circle{fill:var(--kanga);stroke:var(--feuille);stroke-width:2;
  transition:fill .15s ease;transform-box:fill-box;transform-origin:center}
.u-carte-point text{font-family:var(--display);font-weight:700;font-size:10px;letter-spacing:.02em;
  fill:var(--encre);pointer-events:none}
.u-carte-point:hover circle,.u-carte-point:focus circle,.u-carte-point.is-actif circle{
  fill:var(--kanga-fonce);transform:scale(1.35)}
.u-carte-point.is-actif text{fill:var(--kanga-fonce);font-weight:700}
.u-carte-fiche{padding:1.3rem 1.5rem;background:var(--feuille);border:1px solid var(--filet);min-height:104px}
.u-carte-fiche-defaut{color:var(--sourde);font-size:14px}
.u-carte-fiche-nom{font-family:var(--titre);font-size:20px}
.u-carte-fiche-texte{margin-top:.4rem;color:var(--sourde);font-size:14px}
.u-carte-fiche-lien{display:inline-block;margin-top:.6rem;font-family:var(--display);font-weight:700;
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--kanga)}
.u-carte-liste{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.2rem}
.u-carte-liste a{border:1px solid var(--filet);padding:.5rem .9rem;border-radius:var(--u-rayon);font-size:13px}
.u-carte-liste a:hover{border-color:var(--kanga);color:var(--kanga)}

/* ---------- 11. BANDE B4 — CHIFFRES UTILES --------------------------------- */
/* 2 colonnes (jamais 4 sur une ligne) : "14 750 km²" a plein format ne tenait pas
   dans un quart de gouttiere (verdict 14/09), et overflow-wrap:break-word cassait
   au milieu du mot ("14 750 k" / "m²") des que la colonne etait trop etroite.
   white-space:nowrap remplace break-word ; les insecables (functions.php) tiennent
   desormais dans une colonne deux fois plus large. */
.u-chiffres{display:grid;grid-template-columns:1fr;gap:0;margin-top:2rem;max-width:640px;margin-inline:auto}
.u-chiffre{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.5rem;
  padding:1.6rem 1.2rem;border-top:1px solid var(--sourde-nuit);min-width:0}
.u-chiffre:first-child{border-top:0}
@media (min-width:640px){
  .u-chiffres{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px}
  .u-chiffre{border-top:0;border-left:1px solid var(--sourde-nuit)}
  .u-chiffre:nth-child(odd){border-left:0}
  .u-chiffre:nth-child(n+3){border-top:1px solid var(--sourde-nuit)}
}
.u-chiffre b{font-family:var(--titre);font-weight:400;font-size:clamp(32px,3vw + 16px,52px);
  color:var(--ecume);line-height:1.15;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.u-chiffre span{font-size:14px;color:var(--sourde-nuit);max-width:26ch}
.u-b4-bouton{text-align:center;margin-top:2.6rem}

/* ---------- 12. BANDE B5 — SUR MESURE (photo assombrie) -------------------- */
.u-mesure{position:relative;color:var(--ecume);text-align:center}
.u-mesure-photo{position:absolute;inset:0;z-index:-2}
.u-mesure-photo img{width:100%;height:100%;object-fit:cover}
.u-mesure-voile{position:absolute;inset:0;z-index:-1;background:rgba(36,25,15,.6)}
.u-mesure h2{max-width:20ch;margin-inline:auto}
.u-profils{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;margin-top:2.4rem}
.u-profil{border:1px solid var(--kanga-clair);color:var(--ecume);padding:.9rem 1.4rem;
  border-radius:var(--u-rayon);font-family:var(--display);font-size:13px;font-weight:700;
  letter-spacing:.04em;transition:background .2s ease,color .2s ease}
.u-profil:hover{background:var(--kanga-clair);color:var(--encre)}

/* ---------- 13. BANDE B6 — PREPARER SON VOYAGE (rubriques, carrousel) ------ */
/* En-tete (titre + fleches) sur une meme ligne : verdict 14/09 demandait les
   fleches "a droite du titre" plutot que centrees sous la piste. */
.u-rubriques-entete{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.u-rubriques-fleches{display:flex;gap:.8rem;flex:none}
.u-fleche-ronde{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--encre);
  display:grid;place-items:center;flex:none}
.u-fleche-ronde:hover{background:var(--encre);color:var(--feuille)}

.u-rubriques{position:relative;margin-top:2.8rem}
/* Carrousel en debordement ("bleed") jusqu'au bord droit de l'ecran : dans une
   piste confinee a 1180px, la derniere carte visible etait tranchee au milieu
   (verdict 14/09). Le debordement fait de cette coupe une AFFORDANCE volontaire
   (on devine qu'il y a plus a voir) au lieu d'un accident de mise en page. */
.u-rubriques-piste{display:flex;gap:1.6rem;overflow-x:auto;overflow-y:visible;scroll-snap-type:x mandatory;
  padding:70px 20px 1.6rem;-webkit-overflow-scrolling:touch;
  width:100vw;position:relative;left:50%;margin-left:-50vw;
  padding-left:max(20px, calc((100vw - 1180px) / 2 + 20px))}
.u-rubriques-piste::-webkit-scrollbar{height:6px}
.u-rubriques-piste::-webkit-scrollbar-thumb{background:var(--filet);border-radius:3px}
.u-carte-rub{flex:0 0 auto;width:340px;scroll-snap-align:start;background:var(--feuille);
  padding:185px 1.6rem 1.6rem;position:relative;text-align:center}
@media (max-width:780px){.u-carte-rub{width:86%;padding-top:155px}}
.u-carte-rub-photo{position:absolute;top:-60px;left:50%;transform:translateX(-50%);
  width:220px;height:220px;border-radius:50%;overflow:hidden;border:6px solid var(--natron)}
@media (max-width:780px){.u-carte-rub-photo{width:180px;height:180px;top:-50px}}
.u-carte-rub-photo img{width:100%;height:100%;object-fit:cover}
.u-carte-rub h3{font-size:26px;margin-top:.3rem}
.u-carte-rub p{margin-top:.6rem;color:var(--sourde);font-size:15px}
.u-carte-rub-pied{margin-top:1.2rem;display:flex;align-items:center;justify-content:center;gap:1rem}
.u-carte-rub-n{font-size:12px;color:var(--sourde);font-family:var(--display);letter-spacing:.05em}

/* ---------- 14. BANDE B7 — ACCORDEONS FAQ ----------------------------------- */
.u-accordeons{margin-top:2.4rem;display:grid;gap:0}
.u-accordeon{border-top:1px solid var(--sourde-nuit)}
.u-accordeon:last-child{border-bottom:1px solid var(--sourde-nuit)}
.u-accordeon-bouton{width:100%;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:1.4rem 0;text-align:left;color:var(--ecume)}
.u-accordeon-bouton h3{font-size:19px;font-weight:400;font-family:var(--titre)}
.u-accordeon-rond{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--kanga-clair);
  flex:none;display:grid;place-items:center;color:var(--kanga-clair);transition:transform .25s ease}
.u-accordeon-bouton[aria-expanded="true"] .u-accordeon-rond{transform:rotate(180deg)}
.u-accordeon-panneau{max-height:0;overflow:hidden;transition:max-height .35s ease}
.u-accordeon-panneau-in{display:grid;grid-template-columns:200px 1fr;gap:1.6rem;padding-bottom:1.8rem}
@media (max-width:640px){.u-accordeon-panneau-in{grid-template-columns:1fr}}
.u-accordeon-panneau img{aspect-ratio:16/9;object-fit:cover;width:100%}
.u-accordeon-panneau p{color:var(--sourde-nuit);font-size:15px;margin-bottom:.6rem}

/* ---------- 15. BANDE B9 — PRETS ? (formulaire final) ----------------------- */
.u-prets{position:relative;color:var(--ecume)}
.u-prets-photo{position:absolute;inset:0;z-index:-2}
.u-prets-photo img{width:100%;height:100%;object-fit:cover}
.u-prets-voile{position:absolute;inset:0;z-index:-1;background:rgba(36,25,15,.72)}
.u-prets-grille{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
@media (max-width:960px){.u-prets-grille{grid-template-columns:1fr}}
.u-prets h2{color:var(--ecume);font-size:clamp(38px,4vw + 12px,58px);letter-spacing:.02em}
.u-prets .u-form{color:var(--encre);margin-top:0}
.u-prets .u-form-barre{grid-template-columns:1fr}
.u-prets .u-champ{border-right:0;border-bottom:1px solid var(--filet)}
/* Colonne gauche rééquilibrée (verdict 14/09 : "grand vide") : réassurance +
   repère chiffré, pour ne plus laisser un vide en regard du long formulaire. */
.u-prets-reassurance{margin-top:2.2rem;display:grid;gap:1rem}
.u-prets-reassurance li{display:flex;gap:.8rem;align-items:flex-start;font-size:15px;color:var(--sourde-nuit)}
.u-prets-reassurance li svg{flex:none;width:22px;height:22px;color:var(--kanga-clair);margin-top:.15rem}
.u-prets-repere{margin-top:2rem;padding:1.1rem 1.4rem;border:1px solid var(--cendre-haute);
  border-left:3px solid var(--kanga-clair);display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap}
.u-prets-repere b{font-family:var(--titre);font-size:28px;color:var(--ecume)}
.u-prets-repere span{font-size:13px;color:var(--sourde-nuit)}

/* ---------- 16. PIED DE PAGE — B11 ------------------------------------------ */
.u-pied{background:var(--cendre);color:var(--ecume);padding-block:4rem 2rem}
.u-pied-grille{display:grid;grid-template-columns:1.2fr repeat(4,1fr);gap:2.5rem}
@media (max-width:1100px){.u-pied-grille{grid-template-columns:1fr 1fr 1fr}}
@media (max-width:860px){.u-pied-grille{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.u-pied-grille{grid-template-columns:1fr}}
.u-pied-marque{display:flex;align-items:center;gap:.6rem;font-family:var(--display);
  font-weight:700;letter-spacing:.04em;font-size:15px}
.u-pied-marque .u-logo{width:34px;height:auto}
.u-pied-baseline{margin-top:.9rem;color:var(--sourde-nuit);font-size:14px;max-width:32ch}
.u-pied-titre{font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--sourde-nuit);margin-bottom:1rem}
.u-pied-liste{display:grid;gap:.7rem}
.u-pied-liste a{font-size:14px}
.u-pied-liste a:hover{text-decoration:underline;text-underline-offset:3px}
.u-pied-nb{color:var(--sourde-nuit);font-size:12px;margin-left:.3rem}
.u-pied-bas{margin-top:3rem;padding-top:1.6rem;border-top:1px solid var(--cendre-haute);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-size:12px;color:var(--sourde-nuit)}
.u-pied-bas a{color:var(--sourde-nuit)}
.u-pied-bas a:hover{color:var(--ecume)}

/* ---------- 17. PAGE ARTICLE (single.php) ----------------------------------- */
.u-article{padding-block:calc(var(--u-tete-h) + 2.4rem) 4rem}
.u-fil-ariane{display:flex;gap:.5rem;font-size:13px;color:var(--sourde);flex-wrap:wrap}
.u-fil-ariane--clair,.u-fil-ariane--clair a{color:var(--ecume);opacity:.9}
.u-art-titre{font-size:clamp(32px,3vw + 16px,50px);margin-top:.8rem;max-width:24ch}
.u-art-chapo{margin-top:1rem;font-size:19px;color:var(--sourde);max-width:60ch}
.u-art-meta{margin-top:1.2rem;display:flex;flex-wrap:wrap;gap:1.2rem;font-size:13px;color:var(--sourde)}
.u-art-meta a.u-lien-auteur{color:var(--sourde);text-decoration:underline;text-decoration-color:var(--kanga-clair);text-underline-offset:.2em}
.u-art-meta a.u-lien-auteur:hover{color:var(--kanga-clair)}
.u-art-illu{margin-top:2rem;max-height:560px;overflow:hidden}
.u-art-illu img{width:100%;height:100%;object-fit:cover}
.u-art-corps-grille{display:grid;grid-template-columns:minmax(0,1fr);gap:2.4rem;margin-top:2.6rem}
@media (min-width:1280px){.u-art-corps-grille{grid-template-columns:minmax(0,min(760px,100%)) minmax(0,1fr)}}
.u-art-texte{max-width:min(760px,100%);min-width:0;font-size:18px;line-height:1.75}
.u-art-texte h2{font-size:28px;margin-top:2.4rem;margin-bottom:.8rem}
.u-art-texte h3{font-size:22px;margin-top:1.8rem;margin-bottom:.6rem;font-family:var(--corps);font-weight:700}
.u-art-texte p{margin-top:1.1rem}
.u-art-texte ul,.u-art-texte ol{margin-top:1.1rem;padding-left:1.4rem;list-style:disc}
.u-art-texte ol{list-style:decimal}
.u-art-texte a{text-decoration:underline;text-decoration-color:var(--kanga);text-underline-offset:3px}
.u-art-texte figure{margin-top:1.6rem}
.u-art-texte img{border-radius:var(--u-rayon)}
.u-sommaire{background:var(--natron);padding:1.4rem 1.6rem;margin-bottom:1.6rem}
.u-sommaire p{font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sourde)}
.u-sommaire ol{margin-top:.8rem;display:grid;grid-template-columns:minmax(0,1fr);gap:.5rem;list-style:decimal;padding-left:1.2rem}
.u-sommaire li{min-width:0}
.u-sommaire a{overflow-wrap:break-word}
.u-sommaire a{font-size:15px}
.sbs_tableau{overflow-x:auto;margin-top:1.6rem;-webkit-overflow-scrolling:touch}
.sbs_tableau table{border-collapse:collapse;width:100%;min-width:520px;font-size:15px}
.sbs_tableau th,.sbs_tableau td{border:1px solid var(--filet);padding:.6rem .8rem;text-align:left}
.sbs_tableau th{background:var(--natron);font-family:var(--display);font-size:12px;letter-spacing:.05em;text-transform:uppercase}
details{border-top:1px solid var(--filet);padding-block:.9rem}
details summary{cursor:pointer;font-family:var(--display);font-weight:700;font-size:15px}
.u-art-aside{position:sticky;top:calc(var(--u-tete-h) + 1.6rem)}
@media (max-width:1279px){.u-art-aside{display:none}}
.u-art-connexes{margin-top:4rem}
.u-art-connexes-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:1.6rem}
@media (max-width:860px){.u-art-connexes-grille{grid-template-columns:1fr}}
.u-mini-carte figure{aspect-ratio:4/3;overflow:hidden}
.u-mini-carte figure img{width:100%;height:100%;object-fit:cover}
.u-mini-carte h3{margin-top:.7rem;font-size:19px}
.u-signature{display:flex;gap:1rem;align-items:flex-start;margin-top:3rem;padding-top:2rem;border-top:1px solid var(--filet)}
.u-signature-photo{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none}
.u-signature-nom{font-family:var(--display);font-weight:700;font-size:15px}
.u-signature-bio{margin-top:.3rem;color:var(--sourde);font-size:14px}
.u-date{color:var(--sourde);font-size:13px;margin-top:.3rem}

/* ---------- 18. ARCHIVE / RECHERCHE / AUTEUR / DOSSIERS --------------------- */
.u-entete-liste{padding-block:calc(var(--u-tete-h) + 2.6rem) 1rem}
.u-entete-liste h1{font-size:clamp(32px,3vw + 16px,48px)}
.u-compte{font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--sourde)}
.u-grille3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem;margin-top:1.8rem}
@media (max-width:900px){.u-grille3{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.u-grille3{grid-template-columns:1fr}}
.u-fiche{background:var(--feuille)}
.u-fiche figure{aspect-ratio:4/3;overflow:hidden}
.u-fiche figure img{width:100%;height:100%;object-fit:cover}
.u-fiche .u-fiche-in{padding:1.1rem 1.2rem 1.4rem}
.u-fiche h3{font-size:19px}
.u-fiche p{margin-top:.5rem;color:var(--sourde);font-size:14px}
.u-pagination{display:flex;gap:.5rem;justify-content:center;margin-top:3rem;flex-wrap:wrap}
.u-pagination ul{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;list-style:none;padding:0;margin:0}
.u-pagination a,.u-pagination span{min-width:38px;height:38px;display:grid;place-items:center;
  border:1px solid var(--filet);font-size:14px}
.u-pagination .current{background:var(--kanga);border-color:var(--kanga);color:var(--feuille)}
.u-pagination a:hover{border-color:var(--kanga)}
.u-bio-auteur{display:flex;gap:1.2rem;align-items:center;margin-top:1.4rem}
.u-bio-auteur img{width:72px;height:72px;border-radius:50%;object-fit:cover}
.u-bio-auteur p{color:var(--sourde);font-size:15px}
.u-depliant{margin-top:1.2rem;background:var(--natron);padding:1rem 1.3rem}
.u-depliant summary{font-family:var(--display);font-weight:700;font-size:13px}
.u-dossiers-groupe{margin-top:2.8rem;padding-bottom:1.8rem;border-bottom:1px solid var(--filet)}
.u-dossiers-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.7rem 2rem;margin-top:1.2rem}
.u-dossiers-liste a{font-size:15px}
.u-dossiers-liste time{display:block;font-size:12px;color:var(--sourde);margin-top:.15rem}

/* ---------- 19. PAGES SIMPLES / CONTACT / 404 -------------------------------- */
.u-page{padding-block:calc(var(--u-tete-h) + 2.8rem) 4rem}
.u-page h1{font-size:clamp(32px,3vw + 16px,48px)}
.u-page .u-art-texte{margin-top:1.6rem}
.u-contact-grille{display:grid;grid-template-columns:1fr 1fr;gap:3rem;margin-top:2.4rem}
@media (max-width:860px){.u-contact-grille{grid-template-columns:1fr}}
.u-404{text-align:center;padding-block:calc(var(--u-tete-h) + 4rem) 5rem}
.u-404 h1{font-size:clamp(30px,3vw + 14px,44px)}
.u-404 .u-btn{margin-top:1.6rem}
.u-404-liens{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem;margin-top:2.4rem}
.u-404-liens a{border:1px solid var(--filet);padding:.6rem 1.1rem;border-radius:var(--u-rayon)}

/* ---------- 19bis. PAGES DE DESTINATION / PROFIL / SAISON (money pages) ---- */
.u-dest-page-hero{position:relative;padding-block:calc(var(--u-tete-h) + 2.6rem) 2.8rem}
.u-dest-page-hero--aplat{background:var(--kopje)}
.u-dest-page-photo{position:absolute;inset:0;z-index:-2}
.u-dest-page-photo img{width:100%;height:100%;object-fit:cover}
.u-dest-page-voile{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top, rgba(36,25,15,.82) 0%, rgba(36,25,15,.42) 60%, rgba(36,25,15,.16) 100%)}
.u-dest-page-titre--clair,.u-dest-page-chapo--clair{color:var(--ecume)}
.u-dest-page-corps{padding-block:2.6rem 1rem;display:grid;gap:2.6rem}
.u-dest-page-form{background:var(--feuille);padding:1.6rem;border:1px solid var(--filet)}
.u-dest-page-form-titre{font-size:20px;margin-bottom:1rem}
.u-dest-page-carte{padding-block:.5rem 0}
.u-fiche--lien{display:block}
.u-fiche--lien .u-plaque{aspect-ratio:4/3}
.u-dest-page-autres{margin-top:1rem}

/* ---------- 20. NAVIGATION MOBILE (barre basse) ------------------------------ */
/* 14/09/2026 — retirée du premier ecran (verdict expert-design) : une barre fixe non prevue
   reduisait la hauteur utile du hero sur 390x844 et recouvrait le formulaire.
   Le burger + la nav standard (B0) couvrent deja la navigation mobile. */
.u-nav-mobile{display:none !important}

/* ---------- 21. RECHERCHE (form partiel) ------------------------------------- */
.u-recherche-form{display:flex;gap:.5rem;align-items:center}
.u-recherche-form input{flex:1;border:1px solid var(--filet);padding:.6rem .9rem;border-radius:var(--u-rayon)}
.u-recherche-form button{border:1px solid var(--encre);padding:.6rem 1rem;border-radius:var(--u-rayon)}

/* ---------- 22. PLAQUE DE REPLI (pas d'image a la une) ------------------------ */
.u-plaque{display:grid;place-items:center;aspect-ratio:4/3;background:var(--kopje);color:var(--encre);
  font-family:var(--titre);font-size:44px}

/* 15/09 — les photos de fond (z-index negatif) passaient SOUS le fond du body depuis que html porte sa
   propre couleur : chaque section a photo cree son propre contexte d empilement. */
.u-hero,.u-mesure,.u-prets,.u-dest-page-hero,.u-lecture-page-hero{isolation:isolate}
/* 15/09 — le hero remontait sous l'en-tete fixe (sur-titre a 61 px sous un en-tete de 76 px) ;
   la fleche du champ Quand chevauchait « Je ne sais pas encore » dans une colonne etroite. */
.u-hero{margin-top:0}
.u-mois-select select{padding-right:2.8rem;width:100%;min-width:0;text-overflow:ellipsis}
/* 15/09 (retour Mathias) — HERO EQUILIBRE : titre + sous-titre et formulaire sur le meme axe.
   Avant : titre cale a gauche au-dessus d'un formulaire pleine largeur centre. Desormais deux
   colonnes alignees sur la gouttiere, formulaire compact en 2x2 a droite. Mobile inchange. */
@media (min-width:1100px){
  .u-hero{align-items:center}
  .u-hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,540px);column-gap:3.5rem;align-items:center;padding-block:3rem}
  .u-hero-in>*{grid-column:1}
  .u-hero-in>.u-form{grid-column:2;grid-row:1 / span 3;margin-top:0;align-self:center}
  .u-hero h1{font-size:clamp(44px,3.4vw + 12px,64px);max-width:14ch}
  .u-hero .u-form-barre{grid-template-columns:1fr 1fr}
  .u-hero .u-champ{border-right:0;border-bottom:1px solid var(--filet)}
  .u-hero .u-champ:nth-child(1){border-right:1px solid var(--filet)}
  .u-hero .u-champ:nth-child(3),.u-hero .u-champ:nth-child(4){grid-column:1 / -1}
  .u-hero .u-champ:nth-child(4){border-bottom:0}
  .u-hero .u-budget{grid-template-columns:repeat(3,minmax(0,1fr))}
  .u-hero .u-budget label{text-align:center;font-size:12px}
}
/* 15/09 (retour Mathias) — pages de destination : la colonne « Composer mon voyage » doit suivre.
   Sans lecture.css (reserve aux articles), la grille etirait l'aside sur toute la hauteur : sticky inerte. */
.u-dest-page .u-art-corps-grille{align-items:start}
.u-dest-page .u-art-aside{align-self:start;position:sticky;top:calc(var(--u-tete-h) + 1.4rem)}
/* 15/09 — le bloc texte s'etirait sur la hauteur du formulaire (sur-titre en haut, chapo en bas) :
   rangees elastiques au-dessus et au-dessous, le texte reste groupe et centre face au formulaire. */
@media (min-width:1100px){
  .u-hero-in{grid-template-rows:1fr auto auto auto 1fr;row-gap:0}
  .u-hero-in>.u-hero-surtitre{grid-row:2}
  .u-hero-in>h1{grid-row:3}
  .u-hero-in>.u-hero-chapo{grid-row:4}
  .u-hero-in>.u-form{grid-row:1 / -1}
  .u-hero .u-budget label:last-child{grid-column:span 2}
}

/* R-0608 (Mathias 17/09) — liens du corps bien visibles */
.u-art-texte a:not(.re){
  color:var(--kanga);
  text-decoration:underline;
  text-decoration-thickness:3px;
  text-decoration-color:var(--kanga);
  text-underline-offset:4px;
}
.u-art-texte a:not(.re):hover{
  background:color-mix(in srgb, var(--kanga) 14%, transparent);
}