/* ==========================================================================
   Wild Sun Rescue — feuille de style
   Palette relevée directement sur le logo d'Éloïse.
   Typographie : Comfortaa (1re partie des titres) + Adelia (2e partie,
   manuscrite) + Creato Display (texte courant).
   ========================================================================== */

/* --------------------------------------------------------------- POLICES  */
@font-face{font-family:'Comfortaa';src:url('../fonts/Comfortaa-Light.ttf') format('truetype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Comfortaa';src:url('../fonts/Comfortaa-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Comfortaa';src:url('../fonts/Comfortaa-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Adelia';src:url('../fonts/Adelia.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Creato Display';src:url('../fonts/CreatoDisplay-Light.otf') format('opentype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Creato Display';src:url('../fonts/CreatoDisplay-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Creato Display';src:url('../fonts/CreatoDisplay-RegularItalic.otf') format('opentype');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Creato Display';src:url('../fonts/CreatoDisplay-Medium.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Creato Display';src:url('../fonts/CreatoDisplay-Bold.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap}

/* --------------------------------------------------------------- PALETTE  */
:root{
  /* couleurs du logo */
  --terra:#B4512E;          /* terracotta de marque */
  --terra-dark:#8E3D21;     /* survol, petits textes colorés */
  --terra-deep:#A55336;     /* grands aplats */
  --sun:#DD8F62;            /* halo du soleil */
  --sun-light:#F0D5C4;      /* cœur du soleil */
  --sun-pale:#FAE7D6;

  /* fonds et texte */
  --sand:#FBF4EC;
  --sand-2:#F6E9DB;
  --card:#FFFCF9;
  --ink:#43261A;
  --ink-soft:#7B5B4A;
  --ink-mute:#9C8375;
  --line:#EBDCCC;
  --line-soft:#F2E7DA;

  /* mesures */
  --rayon:18px;
  --rayon-s:12px;
  --rayon-l:28px;
  --large:1180px;
  --etroit:760px;
  --ombre:0 2px 10px rgba(67,38,26,.05), 0 12px 34px rgba(67,38,26,.07);
  --ombre-forte:0 4px 16px rgba(67,38,26,.09), 0 20px 50px rgba(67,38,26,.11);
  --entete:74px;
}

/* ------------------------------------------------------------------ BASE  */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--entete) + 20px);-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--sand);color:var(--ink);
  font-family:'Creato Display',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px;line-height:1.72;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--terra-dark);text-decoration-color:rgba(180,81,46,.32);text-underline-offset:3px}
a:hover{color:var(--terra)}
:focus-visible{outline:3px solid var(--terra);outline-offset:3px;border-radius:4px}
::selection{background:var(--sun-light);color:var(--ink)}
hr{border:0;height:1px;background:var(--line);margin:2.5rem 0}

/* ------------------------------------------------------------ TYPOGRAPHIE */
h1,h2,h3,h4{font-family:'Comfortaa',cursive;color:var(--ink);margin:0 0 .6em;font-weight:700;line-height:1.22;letter-spacing:-.01em}
h1{font-size:clamp(2.1rem,5.2vw,3.35rem)}
h2{font-size:clamp(1.65rem,3.6vw,2.5rem)}
h3{font-size:clamp(1.2rem,2.2vw,1.5rem)}
h4{font-size:1.08rem}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}

/* Titre en deux temps : Comfortaa + Adelia manuscrite.
   Adelia a de longues hampes : on lui laisse de l'air et on ne rogne jamais. */
.titre{display:block}
.titre .t1{display:block}
.titre .t2{
  display:block;font-family:'Adelia',cursive;color:var(--terra);
  font-size:1.45em;line-height:1.18;font-weight:400;letter-spacing:0;
  margin-top:.02em;padding-bottom:.18em;text-transform:none;text-wrap:balance;
}
.titre.centre{text-align:center}
.manuscrit{font-family:'Adelia',cursive;color:var(--terra);text-transform:none;font-weight:400}

.surtitre{
  font-family:'Comfortaa',cursive;font-weight:700;font-size:.74rem;
  letter-spacing:.19em;text-transform:uppercase;color:var(--terra);
  margin:0 0 .85rem;display:flex;align-items:center;gap:.6rem;
}
.surtitre::before{content:"";width:26px;height:2px;background:var(--sun);border-radius:2px;flex:none}
.titre.centre + .chapo,.surtitre.centre{justify-content:center}
.surtitre.centre::after{content:"";width:26px;height:2px;background:var(--sun);border-radius:2px;flex:none}

.chapo{font-size:1.16rem;color:var(--ink-soft);line-height:1.68;max-width:65ch}
.centre .chapo,.chapo.centre{margin-left:auto;margin-right:auto;text-align:center}
.petit{font-size:.9rem;color:var(--ink-mute)}

/* --------------------------------------------------------------- LAYOUT   */
.enveloppe{width:min(100% - 2.5rem,var(--large));margin-inline:auto}
.enveloppe.etroite{width:min(100% - 2.5rem,var(--etroit))}
section{padding:clamp(3.4rem,7vw,6rem) 0}
section.serree{padding:clamp(2.4rem,4.5vw,3.6rem) 0}
.fond-sable{background:var(--sand-2)}
.fond-blanc{background:var(--card)}
.fond-terra{background:var(--terra-deep);color:#FDF3EA}
.fond-terra h1,.fond-terra h2,.fond-terra h3{color:#FFF8F0}
.fond-terra .chapo{color:#F3DACA}
.fond-terra .titre .t2{color:var(--sun-light)}
.fond-terra .surtitre{color:var(--sun-light)}
.fond-terra .surtitre::before,.fond-terra .surtitre::after{background:var(--sun)}
.fond-terra a{color:#FFF}

.grille{display:grid;gap:1.6rem}
.g2{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.deux-col{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center}
@media(max-width:860px){.deux-col{grid-template-columns:1fr;gap:2.2rem}}

/* ---------------------------------------------------------------- BOUTONS */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:'Comfortaa',cursive;font-weight:700;font-size:.97rem;
  padding:.86rem 1.7rem;border-radius:999px;border:2px solid transparent;
  cursor:pointer;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease;
  line-height:1.25;text-align:center;
}
.btn:hover{transform:translateY(-2px)}
.btn-plein{background:var(--terra);color:#FFF8F0;box-shadow:0 6px 18px rgba(180,81,46,.28)}
.btn-plein:hover{background:var(--terra-dark);color:#FFF8F0;box-shadow:0 10px 26px rgba(180,81,46,.34)}
.btn-ligne{background:transparent;color:var(--terra-dark);border-color:var(--terra)}
.btn-ligne:hover{background:var(--terra);color:#FFF8F0}
.btn-clair{background:#FFF8F0;color:var(--terra-dark);box-shadow:0 6px 18px rgba(67,38,26,.16)}
.btn-clair:hover{background:#FFF;color:var(--terra-dark)}
.btn-clair-ligne{background:transparent;color:#FFF3E8;border-color:rgba(255,243,232,.62)}
.btn-clair-ligne:hover{background:rgba(255,248,240,.14);color:#FFF}
.btn-petit{padding:.6rem 1.15rem;font-size:.87rem}
.boutons{display:flex;flex-wrap:wrap;gap:.85rem}
.boutons.centre{justify-content:center}

/* ----------------------------------------------------------------- ENTÊTE */
/* Pas de bordure sous l'en-tête : elle coupait le haut de page en deux blocs.
   La séparation n'apparaît que lorsqu'on défile, et seulement par une ombre
   douce (classe .posee posée par le script). */
.entete{
  position:fixed;inset:0 0 auto;z-index:100;height:var(--entete);
  background:rgba(251,244,236,.93);backdrop-filter:blur(12px);
  transition:transform .34s ease,box-shadow .24s ease;
}
.entete.cachee{transform:translateY(-100%)}
.entete.posee{box-shadow:0 4px 20px rgba(67,38,26,.08)}
.entete-in{height:100%;display:flex;align-items:center;justify-content:space-between;gap:1.2rem}
.marque{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex:none}
.marque img{height:46px;width:auto}
.marque-txt{display:flex;flex-direction:column;line-height:1}
.marque-txt b{font-family:'Comfortaa',cursive;font-weight:700;font-size:1.02rem;color:var(--ink);letter-spacing:.01em}
.marque-txt span{font-size:.63rem;letter-spacing:.15em;text-transform:uppercase;color:var(--terra);margin-top:.28rem;font-weight:500}

.nav{display:flex;align-items:center;gap:.15rem}
.nav>li{list-style:none;position:relative}
.nav a{
  display:block;padding:.62rem .78rem;border-radius:10px;text-decoration:none;
  color:var(--ink);font-size:.94rem;font-weight:500;transition:background .16s ease,color .16s ease;white-space:nowrap;
}
.nav a:hover,.nav a:focus-visible{background:var(--sand-2);color:var(--terra-dark)}
.nav a.actif{color:var(--terra);font-weight:700}
.nav>li>a.a-menu::after{content:"";display:inline-block;width:.42em;height:.42em;margin-left:.45em;vertical-align:.14em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-1px);opacity:.55}
.sous-menu{
  position:absolute;top:calc(100% + 6px);left:0;min-width:236px;margin:0;padding:.45rem;
  list-style:none;background:var(--card);border:1px solid var(--line);border-radius:var(--rayon);
  box-shadow:var(--ombre-forte);opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
.nav>li:hover>.sous-menu,.nav>li:focus-within>.sous-menu{opacity:1;visibility:visible;transform:translateY(0)}
.sous-menu a{font-size:.92rem;padding:.55rem .8rem;border-radius:9px}
.entete-actions{display:flex;align-items:center;gap:.6rem;flex:none}

.burger{display:none;width:44px;height:44px;border:0;background:transparent;cursor:pointer;padding:10px;border-radius:12px}
.burger:hover{background:var(--sand-2)}
.burger span{display:block;height:2px;background:var(--ink);border-radius:2px;transition:transform .28s ease,opacity .2s ease}
.burger span+span{margin-top:5px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:1040px){
  .burger{display:block}
  .entete-actions .btn{display:none}
  .nav{
    position:fixed;inset:var(--entete) 0 0;flex-direction:column;align-items:stretch;
    gap:0;background:var(--sand);padding:1.2rem 1.5rem 3rem;margin:0;
    overflow-y:auto;transform:translateX(100%);transition:transform .3s ease;
  }
  .nav.ouverte{transform:none}
  .nav a{padding:.85rem .4rem;font-size:1.05rem;border-radius:10px}
  .nav>li{border-bottom:1px solid var(--line-soft)}
  .nav>li>a.a-menu::after{float:right;margin-top:.5em}
  .sous-menu{
    position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    border:0;background:transparent;padding:0 0 .5rem .9rem;min-width:0;
    display:none;
  }
  .nav>li.deplie>.sous-menu{display:block}
  .sous-menu a{font-size:.97rem;color:var(--ink-soft)}
  .nav-cta{margin-top:1.2rem;display:flex!important;flex-direction:column;gap:.7rem}
  .nav-cta .btn{width:100%}
}
@media(min-width:1041px){.nav-cta{display:none}}

/* --------------------------------------------------------------- BANDEAU  */
/* La bordure sable du bas n'est pas décorative : la hauteur du bandeau tombe
   souvent sur un demi-pixel, et le navigateur mélangeait alors le terracotta
   avec le fond de la section suivante — ce qui dessinait un fin trait sur toute
   la largeur. Ces 2 px de sable garantissent que la jonction se fait sable
   contre sable, donc invisible. */
.hero{
  position:relative;margin-top:var(--entete);padding:0;   /* la respiration est portée par .hero-in */
  border-bottom:2px solid var(--sand);
  background:radial-gradient(120% 90% at 50% 6%,#C6653C 0%,var(--terra-deep) 46%,#93472C 100%);
  color:#FFF6EC;overflow:hidden;isolation:isolate;
}
/* Ceinture ET bretelles contre le trait de jonction : le bloc qui suit le
   bandeau pose un fond opaque et remonte d'un pixel, si bien qu'il recouvre
   physiquement le dernier pixel du bandeau. Même si la hauteur du bandeau
   tombe sur un demi-pixel, plus aucune jonction ne peut apparaître. */
.hero + section{position:relative;z-index:1;margin-top:-1px;background:var(--sand)}

.hero::after{ /* rayons de soleil très discrets */
  content:"";position:absolute;inset:-30% -10% auto;height:150%;z-index:-1;
  background:
    radial-gradient(closest-side,rgba(255,231,205,.34),transparent 72%) 50% 12%/700px 700px no-repeat;
}
.hero-in{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(2rem,5vw,4rem);align-items:center;padding:clamp(3rem,6vw,4.6rem) 0 clamp(3rem,5.5vw,4.4rem)}
@media(max-width:900px){.hero-in{grid-template-columns:1fr;text-align:center;padding-top:2.4rem}.hero .boutons{justify-content:center}}
.hero h1{color:#FFF8F0;margin-bottom:.35em}
.hero h1 .t2{color:var(--sun-light)}
.hero-texte p{color:#F5DECC;font-size:1.14rem;max-width:52ch}
@media(max-width:900px){.hero-texte p{margin-inline:auto}}
.hero-logo{display:flex;justify-content:center}
.hero-logo img{width:min(360px,80%);filter:drop-shadow(0 14px 34px rgba(60,22,10,.3))}
.hero .boutons{margin-top:1.8rem}

/* vague de séparation, reprise du trait du logo */
.vague{display:block;width:100%;height:auto;color:var(--sand)}
.vague path{fill:currentColor}

/* ---------------------------------------------------------------- CARTES  */
.carte{
  background:var(--card);border:1px solid var(--line);border-radius:var(--rayon);
  padding:1.7rem;box-shadow:var(--ombre);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.carte.cliquable:hover{transform:translateY(-4px);box-shadow:var(--ombre-forte);border-color:var(--sun)}
.carte h3{margin-bottom:.45em}
.carte p:last-child{margin-bottom:0}
.carte-ico{
  width:52px;height:52px;border-radius:15px;display:grid;place-items:center;margin-bottom:1.05rem;
  background:linear-gradient(150deg,var(--sun-pale),var(--sun-light));color:var(--terra);flex:none;
}
.carte-ico svg{width:26px;height:26px}

/* Pictogramme en filigrane : au lieu d'occuper un carré en haut à gauche et
   de laisser un vide à sa droite, il est posé en grand dans le fond de la
   carte, très pâle. Le texte passe par-dessus sans être gêné. */
.carte-fond{
  position:absolute;top:-14px;right:-18px;width:132px;height:132px;
  color:var(--sun);opacity:.16;pointer-events:none;z-index:0;
}
.carte-fond svg{width:100%;height:100%;stroke-width:1.1}
.carte:has(.carte-fond){position:relative;overflow:hidden;isolation:isolate}
.carte:has(.carte-fond) > :not(.carte-fond){position:relative;z-index:1}
@media(max-width:640px){.carte-fond{width:108px;height:108px;top:-10px;right:-12px}}

/* Carte « pilier » : pas de pictogramme, le titre est écrit à la main
   (Adelia) et centré. Adelia a de longues hampes : d'où la hauteur de ligne
   généreuse et le petit rembourrage sous le titre. */
.pilier{text-align:center;padding:2.1rem 1.7rem 1.9rem}
.pilier h3{
  font-family:'Adelia',cursive;font-weight:400;color:var(--terra);
  font-size:clamp(1.75rem,2.7vw,2.25rem);line-height:1.28;letter-spacing:0;
  text-transform:none;margin:0 0 1rem;padding-bottom:.18em;
}
.pilier p{color:var(--ink-soft)}

/* étapes numérotées */
.etapes{counter-reset:etape;display:grid;gap:1.1rem;padding:0;margin:0;list-style:none}
.etape{
  counter-increment:etape;position:relative;padding:1.35rem 1.5rem 1.35rem 4.6rem;
  background:var(--card);border:1px solid var(--line);border-radius:var(--rayon);box-shadow:var(--ombre);
}
.etape::before{
  content:counter(etape);position:absolute;left:1.3rem;top:1.3rem;
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:var(--terra);color:#FFF6EC;font-family:'Comfortaa',cursive;font-weight:700;font-size:1rem;
}
.etape h3{font-size:1.1rem;margin-bottom:.3em}
.etape p{margin-bottom:0;color:var(--ink-soft)}
@media(max-width:520px){.etape{padding:3.6rem 1.2rem 1.2rem}.etape::before{top:1.1rem}}

/* chiffres / repères */
.reperes{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1.2rem;text-align:center}
.repere{padding:1.4rem 1rem;background:var(--card);border:1px solid var(--line);border-radius:var(--rayon)}
.repere b{display:block;font-family:'Comfortaa',cursive;font-size:1.9rem;color:var(--terra);line-height:1.1}
.repere span{font-size:.92rem;color:var(--ink-soft)}

/* ------------------------------------------------------------ FICHE CHIEN */
.chiens-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(275px,1fr));gap:1.7rem}
.chien{
  background:var(--card);border:1px solid var(--line);border-radius:var(--rayon);overflow:hidden;
  box-shadow:var(--ombre);transition:transform .2s ease,box-shadow .2s ease;
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
}
.chien:hover{transform:translateY(-5px);box-shadow:var(--ombre-forte);color:inherit}
.chien-photo{position:relative;aspect-ratio:4/3;background:linear-gradient(150deg,var(--sun-pale),var(--sun-light));overflow:hidden}
.chien-photo img{width:100%;height:100%;object-fit:cover}
.chien-corps{padding:1.25rem 1.35rem 1.45rem;display:flex;flex-direction:column;flex:1}
.chien-corps h3{margin-bottom:.15em;font-size:1.32rem}
/* Le NOM DU CHIEN est écrit à la main, comme les titres du site.
   La règle vise uniquement les fiches chiens — qui sont des liens <a> — et
   pas les articles d'actualité, qui réutilisent le même gabarit de carte
   mais sont des <article>. */
a.chien .chien-corps h3{
  font-family:'Adelia',cursive;font-weight:400;color:var(--terra);
  font-size:2.05rem;line-height:1.25;letter-spacing:0;text-transform:none;
  margin:0 0 .3em;padding-bottom:.16em;
}
.chien-meta{font-size:.9rem;color:var(--ink-mute);margin-bottom:.75rem}
.chien-corps p{font-size:.96rem;color:var(--ink-soft);margin-bottom:1.1rem}
.chien-lien{margin-top:auto;font-family:'Comfortaa',cursive;font-weight:700;font-size:.9rem;color:var(--terra)}
.chien-lien::after{content:" →"}

.etiquette{
  position:absolute;top:.85rem;left:.85rem;z-index:2;
  padding:.34rem .82rem;border-radius:999px;font-size:.76rem;font-weight:700;
  font-family:'Comfortaa',cursive;letter-spacing:.02em;
  background:#FFF8F0;color:var(--terra-dark);box-shadow:0 3px 10px rgba(67,38,26,.16);
}
.etiquette.adoption{background:#2E7D5B;color:#FFF}
.etiquette.reserve{background:#C98A2E;color:#FFF}
.etiquette.adopte{background:#4A6FA5;color:#FFF}
.etiquette.parrainer{background:var(--terra);color:#FFF8F0}

/* emplacement photo en attendant les vraies images */
.photo-attente{
  position:absolute;inset:0;display:grid;place-items:center;gap:.5rem;text-align:center;
  color:var(--terra);opacity:.5;padding:1rem;
}
.photo-attente svg{width:44px;height:44px}
.photo-attente span{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;font-family:'Comfortaa',cursive;font-weight:700}

/* filtres */
.filtres{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-bottom:2.4rem}
.filtre{
  font-family:'Comfortaa',cursive;font-weight:700;font-size:.9rem;padding:.55rem 1.15rem;
  border-radius:999px;border:1.5px solid var(--line);background:var(--card);color:var(--ink-soft);
  cursor:pointer;transition:all .18s ease;
}
.filtre:hover{border-color:var(--sun);color:var(--terra-dark)}
.filtre.actif{background:var(--terra);border-color:var(--terra);color:#FFF8F0}

/* fiche détaillée */
.fiche{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(1.8rem,4vw,3.4rem);align-items:start}
@media(max-width:880px){.fiche{grid-template-columns:1fr}}
.fiche-photo{position:relative;aspect-ratio:4/3;border-radius:var(--rayon-l);overflow:hidden;background:linear-gradient(150deg,var(--sun-pale),var(--sun-light));box-shadow:var(--ombre)}
.fiche-photo img{width:100%;height:100%;object-fit:cover}
.infos{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.9rem;margin:1.6rem 0 2rem;padding:0;list-style:none}
.infos li{background:var(--card);border:1px solid var(--line);border-radius:var(--rayon-s);padding:.85rem 1rem}
.infos b{display:block;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--terra);font-family:'Comfortaa',cursive;margin-bottom:.2rem}
.infos span{font-size:1rem;color:var(--ink)}
.pastilles{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.6rem;padding:0;list-style:none}
.pastille{display:inline-flex;align-items:center;gap:.4rem;padding:.42rem .9rem;border-radius:999px;font-size:.88rem;background:var(--sand-2);color:var(--ink-soft);border:1px solid var(--line)}
.pastille.oui{background:#E8F3ED;border-color:#C6E1D4;color:#276B4E}
.pastille.non{background:#FBEBEB;border-color:#F0D2D2;color:#9C3A3A}
.pastille.inconnu{background:var(--sand-2)}

/* ------------------------------------------------- LIGNES PLEINE LARGEUR */
/* Alternative à la grille de cartes : des bandes qui occupent toute la
   largeur, empilées, avec le titre à gauche et le texte à droite. */
.lignes{display:grid;gap:1.05rem}
.ligne{
  display:grid;grid-template-columns:minmax(190px,290px) 1fr;
  gap:clamp(1rem,4vw,2.8rem);align-items:start;
  background:var(--card);border:1px solid var(--line);border-radius:var(--rayon);
  padding:1.6rem clamp(1.4rem,3vw,2.2rem);box-shadow:var(--ombre);
  transition:border-color .2s ease,box-shadow .2s ease;
}
.ligne:hover{border-color:var(--sun);box-shadow:var(--ombre-forte)}
.ligne h3{margin:0;font-size:1.2rem;line-height:1.3}
.ligne p{margin:0;color:var(--ink-soft)}
.ligne p + p{margin-top:.7em}

/* variante avec pictogramme : icône + titre à gauche, texte à droite */
.ligne-titre{display:flex;align-items:center;gap:.85rem}
.ligne-titre .carte-ico{margin:0;width:46px;height:46px;border-radius:13px}
.ligne-titre .carte-ico svg{width:23px;height:23px}
.ligne-titre h3{margin:0;font-size:1.13rem}
.ligne-texte p{margin:0}
.ligne-texte p + p{margin-top:.65em}

@media(max-width:760px){
  .ligne{grid-template-columns:1fr;gap:.75rem}
  .ligne-titre{gap:.7rem}
}

/* ------------------------------------------------------------ BANDE PHOTOS */
.bande-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.bande-photos figure{margin:0;position:relative;border-radius:var(--rayon);overflow:hidden;box-shadow:var(--ombre)}
.bande-photos img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;transition:transform .5s ease}
.bande-photos figure:hover img{transform:scale(1.04)}
.bande-photos figcaption{
  position:absolute;inset:auto 0 0;padding:1.6rem .95rem .8rem;
  background:linear-gradient(transparent,rgba(48,24,14,.72));
  color:#FFF3E8;font-size:.86rem;line-height:1.4;
}
@media(max-width:820px){
  .bande-photos{grid-template-columns:1fr 1fr}
  .bande-photos figure:last-child{grid-column:1 / -1}
}
@media(max-width:520px){
  .bande-photos{grid-template-columns:1fr}
  .bande-photos figure:last-child{grid-column:auto}
}

/* ---------------------------------------------------------------- VIDÉOS  */
.videos{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.videos figure{margin:0;position:relative;border-radius:var(--rayon);overflow:hidden;box-shadow:var(--ombre);background:var(--sand-2)}
.videos video{width:100%;height:100%;aspect-ratio:9/16;object-fit:cover;display:block}
.videos figcaption{
  position:absolute;inset:auto 0 0;padding:1.8rem .9rem .75rem;
  background:linear-gradient(transparent,rgba(48,24,14,.75));
  color:#FFF3E8;font-size:.84rem;line-height:1.35;
}
@media(max-width:900px){.videos{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.videos{grid-template-columns:1fr;max-width:330px;margin-inline:auto}}

/* --------------------------------------------------------------- CARROUSEL */
.carrousel{position:relative}
/* Le déplacement est animé en JavaScript : surtout pas de scroll-behavior:smooth
   ici, sinon l'animation native et le magnétisme se contrarient et la piste
   revient à sa position de départ. Le magnétisme reste en « proximity » pour
   le balayage tactile, et le script le neutralise le temps de son animation. */
.carrousel-piste{
  display:flex;gap:1.6rem;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  padding:.5rem .3rem 1.2rem;margin:0 -.3rem;
  scrollbar-width:none;-ms-overflow-style:none;cursor:grab;
}
.carrousel-piste::-webkit-scrollbar{display:none}
.carrousel-piste.attrape{cursor:grabbing;scroll-snap-type:none}
.carrousel-piste.attrape *{pointer-events:none}
.carrousel-piste>*{flex:0 0 calc((100% - 3.2rem) / 3);scroll-snap-align:start;min-width:0}
@media(max-width:1000px){.carrousel-piste>*{flex-basis:calc((100% - 1.6rem) / 2)}}
@media(max-width:660px){.carrousel-piste{gap:1.1rem}.carrousel-piste>*{flex-basis:100%}}

/* ---- Carrousel qui déborde jusqu'aux bords de l'écran ----
   Les cartes ont une largeur fixe : la suivante dépasse donc toujours du
   cadre, ce qui montre au visiteur qu'il y a d'autres cartes à côté et lui
   donne envie de faire défiler. Le rembourrage latéral aligne la première
   carte sur le reste du contenu de la page. */
/* En mode boucle, le magnetisme est gere par le script : celui du
   navigateur recalait la piste et supprimait le debord de gauche. */
.carrousel[data-boucle] .carrousel-piste{scroll-snap-type:none}
.carrousel.plein{width:100%;overflow:hidden}
.carrousel.plein .carrousel-piste{
  padding-inline:max(1.25rem, calc((100% - var(--large)) / 2));
  margin-inline:0;
}
.carrousel.plein .carrousel-piste>*{
  flex:0 0 clamp(268px, 26vw, 348px);
}
@media(max-width:640px){
  .carrousel.plein .carrousel-piste>*{flex-basis:min(300px, 80%)}
}

.carrousel-nav{display:flex;justify-content:center;align-items:center;gap:1.1rem;margin-top:1.2rem}
.carrousel-fleche{
  width:46px;height:46px;border-radius:50%;flex:none;cursor:pointer;
  background:var(--card);border:1.5px solid var(--line);color:var(--terra);
  display:grid;place-items:center;transition:all .18s ease;
}
.carrousel-fleche:hover:not(:disabled){background:var(--terra);border-color:var(--terra);color:#FFF8F0;transform:translateY(-2px)}
.carrousel-fleche:disabled{opacity:.35;cursor:default}
.carrousel-fleche svg{width:19px;height:19px}
.carrousel-puces{display:flex;gap:.45rem;align-items:center}
.carrousel-puce{
  width:9px;height:9px;padding:0;border:0;border-radius:99px;cursor:pointer;
  background:var(--line);transition:all .22s ease;
}
.carrousel-puce:hover{background:var(--sun)}
.carrousel-puce.active{background:var(--terra);width:26px}
.fond-terra .carrousel-fleche{background:transparent;border-color:rgba(255,243,232,.5);color:#FFF3E8}
.fond-terra .carrousel-fleche:hover:not(:disabled){background:#FFF8F0;color:var(--terra-dark);border-color:#FFF8F0}

/* --------------------------------------------------------------- ACCORDÉON */
.accordeon{display:grid;gap:.85rem}
.qr{background:var(--card);border:1px solid var(--line);border-radius:var(--rayon);overflow:hidden}
.qr summary{
  cursor:pointer;padding:1.15rem 3rem 1.15rem 1.4rem;position:relative;list-style:none;
  font-family:'Comfortaa',cursive;font-weight:700;font-size:1.03rem;color:var(--ink);
}
.qr summary::-webkit-details-marker{display:none}
.qr summary:hover{color:var(--terra-dark)}
.qr summary::after{
  content:"";position:absolute;right:1.4rem;top:1.55rem;width:.6em;height:.6em;
  border-right:2px solid var(--terra);border-bottom:2px solid var(--terra);
  transform:rotate(45deg);transition:transform .22s ease;
}
.qr[open] summary::after{transform:rotate(-135deg);top:1.75rem}
.qr-corps{padding:0 1.4rem 1.35rem;color:var(--ink-soft)}
.qr[open]{border-color:var(--sun)}

/* ------------------------------------------------------------- FORMULAIRES */
.form{display:grid;gap:1.25rem}
.champ{display:grid;gap:.4rem}
.champ label,.legende{
  font-family:'Comfortaa',cursive;font-weight:700;font-size:.88rem;color:var(--ink);
}
.champ .aide{font-size:.84rem;color:var(--ink-mute);margin:0}
.champ input,.champ select,.champ textarea{
  font-family:inherit;font-size:1rem;color:var(--ink);
  padding:.78rem .95rem;border:1.5px solid var(--line);border-radius:var(--rayon-s);
  background:var(--card);width:100%;transition:border-color .16s ease,box-shadow .16s ease;
}
.champ textarea{min-height:120px;resize:vertical;line-height:1.6}
.champ input:focus,.champ select:focus,.champ textarea:focus{
  outline:none;border-color:var(--terra);box-shadow:0 0 0 4px rgba(180,81,46,.13);
}
.champ-duo{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
@media(max-width:620px){.champ-duo{grid-template-columns:1fr}}
fieldset{border:1px solid var(--line);border-radius:var(--rayon);padding:1.5rem;margin:0;background:var(--card)}
legend{padding:0 .6rem;font-family:'Comfortaa',cursive;font-weight:700;color:var(--terra);font-size:.95rem}
.cases{display:grid;gap:.55rem;margin-top:.3rem}
.case{display:flex;gap:.65rem;align-items:flex-start;font-size:.97rem;color:var(--ink-soft);cursor:pointer}
.case input{width:19px;height:19px;margin-top:.22rem;accent-color:var(--terra);flex:none}
.requis{color:var(--terra)}

/* -------------------------------------------------------------- ENCADRÉS  */
.encadre{
  background:var(--sun-pale);border:1px solid #EFD3BC;border-left:4px solid var(--terra);
  border-radius:var(--rayon-s);padding:1.25rem 1.4rem;
}
.encadre h3{font-size:1.05rem;margin-bottom:.4em;color:var(--terra-dark)}
.encadre p:last-child{margin-bottom:0}
.encadre.info{background:#EDF4F7;border-color:#CFE2EA;border-left-color:#3E7F9C}
.encadre.info h3{color:#2E6480}
.encadre.attention{background:#FDF3E3;border-color:#F0DDBE;border-left-color:#C98A2E}
.encadre.attention h3{color:#8F6218}

.citation{
  font-size:1.2rem;line-height:1.65;color:var(--ink);font-style:italic;
  border-left:3px solid var(--sun);padding-left:1.4rem;margin:0;
}
.citation footer{font-style:normal;font-size:.92rem;color:var(--ink-mute);margin-top:.7rem}

/* liste à cœurs */
.liste-coeur{list-style:none;padding:0;margin:0;display:grid;gap:.7rem}
.liste-coeur li{position:relative;padding-left:1.9rem;color:var(--ink-soft)}
.liste-coeur li::before{
  content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;border-radius:50%;
  background:var(--sun);box-shadow:0 0 0 4px rgba(221,143,98,.2);
}

/* équipe */
.membre{text-align:center}
.membre-photo{
  width:132px;height:132px;border-radius:50%;margin:0 auto 1rem;overflow:hidden;
  background:linear-gradient(150deg,var(--sun-pale),var(--sun-light));display:grid;place-items:center;
  border:3px solid var(--card);box-shadow:var(--ombre);
}
.membre-photo img{width:100%;height:100%;object-fit:cover}
.membre-photo svg{width:46px;height:46px;color:var(--terra);opacity:.45}
.membre h3{margin-bottom:.1em;font-size:1.18rem}
.membre .role{font-size:.88rem;color:var(--terra);font-weight:500;letter-spacing:.04em;margin-bottom:.7rem}

/* montants de don */
.montants{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.85rem;margin-bottom:1.4rem}
.montant{
  text-align:center;padding:1.1rem .8rem;border:1.5px solid var(--line);border-radius:var(--rayon-s);
  background:var(--card);cursor:pointer;transition:all .18s ease;
}
.montant:hover{border-color:var(--sun);transform:translateY(-2px)}
.montant b{display:block;font-family:'Comfortaa',cursive;font-size:1.45rem;color:var(--terra)}
.montant span{font-size:.82rem;color:var(--ink-mute)}

/* ----------------------------------------------------------------- PIED   */
.pied{background:#3B2317;color:#E4CDBC;padding:clamp(3rem,5vw,4.2rem) 0 1.8rem;margin-top:0}
.pied a{color:#E4CDBC;text-decoration:none}
.pied a:hover{color:#FFF;text-decoration:underline}
.pied-haut{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:2.4rem;padding-bottom:2.4rem;border-bottom:1px solid rgba(228,205,188,.16)}
@media(max-width:900px){.pied-haut{grid-template-columns:1fr 1fr;gap:2rem}}
@media(max-width:540px){.pied-haut{grid-template-columns:1fr}}
.pied h4{color:#FFF3E8;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:1.1rem}
.pied ul{list-style:none;padding:0;margin:0;display:grid;gap:.6rem;font-size:.95rem}
.pied-logo img{width:190px;margin-bottom:1.1rem}
.pied-logo p{font-size:.94rem;color:#C7AC99;max-width:34ch}
.pied-bas{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;padding-top:1.6rem;font-size:.87rem;color:#B49B89}
.reseaux{display:flex;gap:.7rem;margin-top:1.1rem}
.reseaux a{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,243,232,.1);transition:background .18s ease,transform .18s ease;
}
.reseaux a:hover{background:var(--terra);transform:translateY(-2px)}
.reseaux svg{width:19px;height:19px}

/* --------------------------------------------------------------- DIVERS   */
.ruban{
  background:var(--terra);color:#FFF6EC;text-align:center;padding:.6rem 1rem;font-size:.9rem;
  position:relative;z-index:101;
}
.ruban a{color:#FFF;font-weight:700}

.fil{font-size:.88rem;color:var(--ink-mute);padding:1.2rem 0 0}
.fil a{color:var(--ink-mute);text-decoration:none}
.fil a:hover{color:var(--terra)}
.fil span{margin:0 .45rem;opacity:.5}

/* Bandeau de titre des pages intérieures : tout est centré à l'intérieur,
   le contenu de la page reste aligné à gauche. */
.page-tete{
  margin-top:var(--entete);background:var(--sand-2);
  padding:clamp(2.4rem,5vw,3.6rem) 0 clamp(2rem,4vw,3rem);
  text-align:center;
}
.page-tete .chapo{margin-top:.4rem;margin-inline:auto;text-align:center}
.page-tete .fil{justify-content:center}
/* bandeau qui ne porte qu'un fil d'Ariane : inutile de lui donner de la hauteur */
.page-tete.mince{padding:1.2rem 0 1rem}
.page-tete.mince .fil{padding-top:0}

.appel{
  background:linear-gradient(140deg,var(--terra) 0%,var(--terra-deep) 55%,#8E3D21 100%);
  color:#FFF6EC;border-radius:var(--rayon-l);padding:clamp(2.2rem,5vw,3.4rem);text-align:center;
  box-shadow:var(--ombre-forte);
}
.appel h2{color:#FFF8F0}
.appel .t2{color:var(--sun-light)}
.appel p{color:#F3DACA;max-width:56ch;margin-inline:auto}
.appel .boutons{justify-content:center;margin-top:1.7rem}

.a-venir{
  text-align:center;padding:3rem 1.5rem;border:2px dashed var(--line);border-radius:var(--rayon);
  color:var(--ink-mute);background:var(--card);
}
.a-venir svg{width:46px;height:46px;color:var(--sun);margin-bottom:1rem}

.saut{display:block;height:1px}
.visuellement-cache{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.lien-evitement{
  position:absolute;left:-9999px;top:0;z-index:200;background:var(--terra);color:#FFF;
  padding:.8rem 1.3rem;border-radius:0 0 12px 0;font-weight:700;
}
.lien-evitement:focus{left:0;color:#FFF}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* Apparition douce au défilement.
   L'état masqué n'est appliqué QUE si le JavaScript fonctionne (classe .js posée
   sur <html> dès le chargement) : sans lui, le contenu reste normalement visible. */
.js .apparait{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.js .apparait.vu{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .apparait{opacity:1;transform:none}}