/* ==========================================================================
   Les Enfants Pas Sages — feuille de style
   Palette échantillonnée directement sur la maquette.
   Polices auto-hébergées : aucune requête vers un serveur tiers.
   ========================================================================== */

/* ------------------------------------------------------- Polices --- */

/* Fraunces — serif variable (axes wght + SOFT) */
@font-face{
  font-family:"Fraunces";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("polices/fraunces-latin-soft-normal.woff2") format("woff2-variations"),
      url("polices/fraunces-latin-soft-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,
    U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Fraunces";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("polices/fraunces-latin-ext-soft-normal.woff2") format("woff2-variations"),
      url("polices/fraunces-latin-ext-soft-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
    U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* Quicksand — sans arrondi */
@font-face{ font-family:"Quicksand"; font-style:normal; font-weight:500; font-display:swap;
  src:url("polices/quicksand-latin-500-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,
    U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:"Quicksand"; font-style:normal; font-weight:600; font-display:swap;
  src:url("polices/quicksand-latin-600-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,
    U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:"Quicksand"; font-style:normal; font-weight:700; font-display:swap;
  src:url("polices/quicksand-latin-700-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,
    U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:"Quicksand"; font-style:normal; font-weight:500; font-display:swap;
  src:url("polices/quicksand-latin-ext-500-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
    U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face{ font-family:"Quicksand"; font-style:normal; font-weight:600; font-display:swap;
  src:url("polices/quicksand-latin-ext-600-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
    U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face{ font-family:"Quicksand"; font-style:normal; font-weight:700; font-display:swap;
  src:url("polices/quicksand-latin-ext-700-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
    U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root{
  /* Couleurs de marque */
  --vert:        #3A5545;
  --vert-fonce:  #2C4235;
  --vert-doux:   #8FA48C;
  --sauge:       #D6D2B6;
  --sauge-clair: #E2DFC8;
  --beige:       #E6DECA;
  --creme:       #F8EDDF;
  --creme-clair: #FDF8F0;
  --terre:       #855428;
  --terre-clair: #B3743A;
  --or:          #C28E2E;
  --or-clair:    #E0AE4E;
  --encre:       #2E3B31;
  --encre-doux:  #526155;

  /* Typo */
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans:  "Quicksand", ui-rounded, "Segoe UI", system-ui, sans-serif;

  /* Rythme */
  --rayon:   22px;
  --rayon-l: 34px;
  --gouttiere: clamp(1.25rem, 4vw, 3.5rem);
  --max: 1440px;

  --ombre-douce: 0 2px 10px rgba(58,85,69,.05), 0 12px 34px rgba(58,85,69,.07);
  --ombre-levee: 0 4px 14px rgba(58,85,69,.08), 0 22px 48px rgba(58,85,69,.12);

  --transition: 340ms cubic-bezier(.22,.68,.36,1);
}

/* --------------------------------------------------------------- Base --- */

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--creme);
  color:var(--encre);
  font-family:var(--sans);
  font-size:clamp(1rem, .95rem + .25vw, 1.1rem);
  line-height:1.65;
  font-weight:500;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }

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

h1,h2,h3{
  font-family:var(--serif);
  font-weight:600;
  font-variation-settings:"SOFT" 40;
  color:var(--vert);
  line-height:1.15;
  margin:0;
  letter-spacing:-.01em;
}

.lien-evitement{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--vert); color:#fff; padding:.85rem 1.4rem;
  border-radius:0 0 var(--rayon) 0; font-weight:700;
}
.lien-evitement:focus{ left:0; }

:focus-visible{
  outline:3px solid var(--terre-clair);
  outline-offset:3px;
  border-radius:6px;
}

.enveloppe{
  width:min(100% - (var(--gouttiere) * 2), var(--max));
  margin-inline:auto;
}

.vh{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* ------------------------------------------------------------- Héros --- */

.heros{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);
  align-items:stretch;
  gap:clamp(1.5rem,3vw,3rem);
  min-height:min(80svh, 730px);
  padding:0 0 clamp(2rem,4vw,3.5rem) var(--gouttiere);
  overflow:hidden;
}

.heros__contenu{
  position:relative;
  z-index:2;
  align-self:center;
  max-width:36rem;
  padding-block:clamp(1.75rem,4vw,3rem);
}

/* Le bloc de texte est décalé vers l'intérieur : le logo reste à gauche
   et le couloir libéré accueille les éléments de décor. */
.heros__texte{ padding-left:clamp(0px, 4vw, 64px); }

.heros__logo{
  width:clamp(104px, 12vw, 158px);
  height:auto;
  margin-bottom:clamp(1.25rem,2.5vw,2rem);
  filter:drop-shadow(0 8px 20px rgba(58,85,69,.16));
}

.titre{
  font-size:clamp(1.95rem, 1.15rem + 2.6vw, 2.8rem);
  margin-bottom:1.1rem;
}
.titre .accent{ color:var(--terre); }

.filet{
  display:flex; align-items:center; gap:.85rem;
  margin:1.4rem 0 1.35rem;
  max-width:22rem;
}
.filet::before,.filet::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg,transparent,var(--vert-doux),transparent);
}
.filet svg{ width:20px; height:20px; color:var(--vert-doux); flex:none; }

.accroche{
  font-size:clamp(1.02rem,.95rem + .35vw,1.28rem);
  font-weight:600;
  color:var(--encre);
  margin:0 0 clamp(1.6rem,3vw,2.2rem);
  max-width:30rem;
}

.pastille{
  display:inline-flex; align-items:center; gap:.7rem;
  background:var(--sauge);
  color:var(--vert);
  font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  font-size:clamp(.82rem,.78rem + .2vw,.98rem);
  padding:.95rem 2rem;
  border-radius:999px;
  border:1px solid rgba(58,85,69,.09);
  box-shadow:var(--ombre-douce);
}
.pastille svg{ width:20px; height:20px; flex:none; color:var(--vert); }

.heros__note{
  font-family:var(--serif);
  font-size:clamp(1.15rem,1rem + .6vw,1.55rem);
  color:var(--vert);
  line-height:1.4;
  margin:clamp(1.4rem,2.5vw,1.9rem) 0 0;
  max-width:26rem;
}
.heros__note .accent{ color:var(--terre); }

/* Photo */

.heros__visuel{
  position:relative;
  align-self:stretch;
  min-height:clamp(300px, 42vw, 660px);
  border-radius:0 0 0 var(--rayon-l);
  overflow:hidden;
}
.heros__visuel img{
  width:100%; height:100%;
  object-fit:cover; object-position:center 42%;
}
/* fondu du bord gauche vers le fond crème */
.heros__visuel::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg, var(--creme) 0%, rgba(248,237,223,.55) 9%, rgba(248,237,223,0) 26%);
  pointer-events:none;
}

/* Décor flottant */

.decor{
  position:absolute;
  pointer-events:none;
  z-index:1;
  color:var(--vert-doux);
  opacity:.85;
}
.decor--arc     { left:.9%;   top:44%;  width:clamp(48px,5vw,78px); }
.decor--etoile1 { left:17.5%; top:11%;  width:20px; color:var(--or); }
.decor--etoile2 { left:13%;   top:17.5%;width:13px; color:var(--sauge); }
.decor--point1  { left:42%;   top:10%;  width:11px; color:var(--or-clair); }
.decor--point2  { left:2.2%;  top:63%;  width:9px;  color:var(--vert-doux); }
.decor--etincelle{left:3.6%;  top:27%;  width:16px; color:var(--or); }

/* ------------------------------------------------- Bloc contribution --- */

.contribution{
  padding:0 var(--gouttiere) clamp(2.5rem,5vw,4.5rem);
}

.contribution__carte{
  background:var(--beige);
  border-radius:var(--rayon-l);
  padding:clamp(1.75rem,3.4vw,3.25rem);
  display:grid;
  grid-template-columns:1.2fr 1fr .92fr;
  gap:clamp(1.75rem,3.2vw,3.25rem);
  box-shadow:var(--ombre-douce);
  position:relative;
  overflow:hidden;
}

.colonne{ position:relative; min-width:0; }

.colonne + .colonne{
  border-left:1px solid rgba(58,85,69,.14);
  padding-left:clamp(1.5rem,3vw,3rem);
}

.colonne__titre{
  font-size:clamp(1.18rem,1.02rem + .55vw,1.55rem);
  margin-bottom:.9rem;
  padding-right:2.5rem;
}

.colonne__coeur{
  position:absolute; top:-.15rem; right:0;
  width:26px; height:26px; color:var(--vert-doux);
  opacity:.55;
}

.colonne p{ margin:0 0 1.1rem; color:var(--encre-doux); }
.colonne p strong{ color:var(--encre); font-weight:700; }

/* Deux façons de contribuer */

.facons{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(1rem,2vw,1.75rem);
  margin-top:1.4rem;
}

.facon{
  display:flex; gap:.85rem; align-items:flex-start;
}

.jeton{
  flex:none;
  width:clamp(44px,4vw,54px); height:clamp(44px,4vw,54px);
  border-radius:50%;
  display:grid; place-items:center;
  color:var(--creme-clair);
  transition:transform var(--transition), box-shadow var(--transition);
}
.jeton svg{ width:52%; height:52%; }
.jeton--vert{ background:var(--vert); }
.jeton--or  { background:var(--or); }

.facon:hover .jeton,
.facon:focus-within .jeton{
  transform:translateY(-4px) rotate(-6deg) scale(1.06);
  box-shadow:0 10px 22px rgba(58,85,69,.22);
}

.facon__texte{ font-size:.95rem; line-height:1.45; }
.facon__texte b{
  display:block; font-weight:700; color:var(--encre); margin-bottom:.15rem;
}
.facon__texte span{ color:var(--encre-doux); }

/* Étapes */

.etapes{ list-style:none; margin:0; padding:0; display:grid; gap:1.15rem; }

.etape{ display:flex; gap:.95rem; align-items:flex-start; }

.etape__icone{
  flex:none; width:30px; height:30px; color:var(--vert);
  margin-top:.1rem;
  transition:transform var(--transition);
}
.etape:hover .etape__icone{ transform:scale(1.12) rotate(-4deg); }
.etape__texte{ font-size:.97rem; line-height:1.5; color:var(--encre); }
.etape__texte b{ font-weight:700; }

/* Bloc courriel */

.boite-courriel{
  display:block;
  background:var(--creme-clair);
  border:1px solid rgba(58,85,69,.1);
  border-radius:var(--rayon);
  padding:1.15rem 1.35rem;
  text-align:center;
  font-weight:700;
  color:var(--encre);
  word-break:break-word;
  line-height:1.35;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset;
  transition:transform var(--transition), box-shadow var(--transition), color var(--transition);
}
.boite-courriel:hover,
.boite-courriel:focus-visible{
  transform:translateY(-3px);
  box-shadow:var(--ombre-levee);
  color:var(--terre);
}

.lien-doux{
  display:inline-flex; align-items:center; gap:.45rem;
  margin-top:1rem;
  font-weight:700; font-size:.94rem;
  color:var(--terre);
}
.lien-doux svg{ width:16px; height:16px; transition:transform var(--transition); }
.lien-doux:hover svg{ transform:translateX(4px); }
.lien-doux::after{
  content:""; position:absolute;
}

/* ------------------------------------------------------------- Pied --- */

.pied{
  background:var(--vert);
  color:rgba(255,255,255,.82);
  padding:clamp(1.75rem,3vw,2.25rem) var(--gouttiere);
  position:relative;
  margin-top:auto;
}

.pied__grille{
  width:min(100% , var(--max));
  margin-inline:auto;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:1rem;
  font-size:.9rem;
}

.pied__logo{
  width:clamp(62px,6vw,86px);
  justify-self:center;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.22));
  transition:transform var(--transition);
}
.pied__logo:hover{ transform:translateY(-4px) rotate(3deg); }

.pied__liens{
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:flex-end; gap:.65rem 1.1rem;
  justify-self:end;
}
.pied__liens a{
  color:rgba(255,255,255,.86);
  position:relative; padding-bottom:2px;
}
.pied__liens a::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--transition);
}
.pied__liens a:hover::after,
.pied__liens a:focus-visible::after{ transform:scaleX(1); }
.pied__sep{ opacity:.35; }
.pied__coeur{ width:20px; height:20px; color:var(--or-clair); }

/* ==========================================================================
   Page contact
   ========================================================================== */

.page{ min-height:100svh; display:flex; flex-direction:column; }

.barre{
  padding:clamp(1.1rem,2.2vw,1.6rem) var(--gouttiere);
}
.barre__grille{
  width:min(100%, var(--max)); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.barre__logo{ width:clamp(66px,6.5vw,92px); transition:transform var(--transition); }
.barre__logo:hover{ transform:rotate(-4deg) scale(1.04); }

.retour{
  display:inline-flex; align-items:center; gap:.5rem;
  font-weight:700; font-size:.94rem; color:var(--vert);
}
.retour svg{ width:16px; height:16px; transition:transform var(--transition); }
.retour:hover svg{ transform:translateX(-4px); }

.contact{
  flex:1;
  padding:clamp(1rem,3vw,2.5rem) var(--gouttiere) clamp(3rem,6vw,5rem);
}

.contact__grille{
  width:min(100%, 1080px);
  margin-inline:auto;
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:clamp(1.75rem,4vw,3.5rem);
  align-items:start;
}

.contact__intro .titre{ font-size:clamp(1.9rem,1.2rem + 2.4vw,2.9rem); }

.contact__liste{
  list-style:none; margin:1.75rem 0 0; padding:0;
  display:grid; gap:1rem;
}
.contact__liste li{
  display:flex; gap:.8rem; align-items:flex-start;
  font-size:.97rem; color:var(--encre-doux);
}
.contact__liste svg{ width:22px; height:22px; color:var(--or); flex:none; margin-top:.15rem; }

.citation{
  position:relative;
  margin:clamp(2rem,4vw,3rem) 0 0;
  padding:clamp(1.4rem,2.5vw,2rem) clamp(1.4rem,2.5vw,2rem) clamp(1.4rem,2.5vw,1.75rem);
  background:var(--beige);
  border-radius:var(--rayon-l);
}
.citation__arc{
  width:clamp(44px,4.5vw,62px);
  margin-bottom:.9rem;
}
.citation p{
  font-family:var(--serif);
  font-variation-settings:"SOFT" 40;
  font-size:clamp(1.05rem,.95rem + .5vw,1.3rem);
  line-height:1.4;
  color:var(--vert);
  margin:0 0 .6rem;
}
.citation cite{
  font-style:normal; font-size:.85rem; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase;
  color:var(--terre);
}

.formulaire{
  background:var(--beige);
  border-radius:var(--rayon-l);
  padding:clamp(1.5rem,3vw,2.5rem);
  box-shadow:var(--ombre-douce);
  position:relative;
}

.champ{ margin-bottom:1.25rem; }
.champ:last-of-type{ margin-bottom:1rem; }

.champ label{
  display:block;
  font-weight:700; font-size:.93rem;
  color:var(--vert);
  margin-bottom:.45rem;
}
.champ label .option{ font-weight:600; color:var(--encre-doux); }

.champ input,
.champ textarea{
  width:100%;
  font:inherit; font-size:1rem; font-weight:500;
  color:var(--encre);
  background:var(--creme-clair);
  border:1.5px solid rgba(58,85,69,.16);
  border-radius:16px;
  padding:.85rem 1rem;
  transition:border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.champ textarea{ min-height:190px; resize:vertical; line-height:1.6; }

.champ input::placeholder,
.champ textarea::placeholder{ color:#6D7A6F; font-weight:500; }

.champ input:focus,
.champ textarea:focus{
  outline:none;
  border-color:var(--vert-doux);
  box-shadow:0 0 0 4px rgba(143,164,140,.22);
}

.champ input[aria-invalid="true"],
.champ textarea[aria-invalid="true"]{
  border-color:#B4483A;
  box-shadow:0 0 0 4px rgba(180,72,58,.14);
}

.aide{ font-size:.85rem; color:var(--encre-doux); margin:.4rem 0 0; }
.erreur-champ{
  font-size:.85rem; color:#8E3327; font-weight:700;
  margin:.4rem 0 0; min-height:0;
}

.case{
  display:flex; gap:.7rem; align-items:flex-start;
  font-size:.9rem; color:var(--encre-doux);
  margin-bottom:1.5rem; cursor:pointer;
}
.case input{
  width:20px; height:20px; flex:none; margin-top:.15rem;
  accent-color:var(--vert); cursor:pointer;
}

.pot-de-miel{
  position:absolute!important; left:-9999px!important;
  width:1px; height:1px; opacity:0;
}

.bouton{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  width:100%;
  font:inherit; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  font-size:.92rem;
  color:var(--creme-clair);
  background:var(--vert);
  border:none; border-radius:999px;
  padding:1.05rem 2rem;
  cursor:pointer;
  box-shadow:var(--ombre-douce);
  transition:transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.bouton:hover:not(:disabled){
  background:var(--vert-fonce);
  transform:translateY(-3px);
  box-shadow:var(--ombre-levee);
}
.bouton:active:not(:disabled){ transform:translateY(-1px); }
.bouton:disabled{ opacity:.62; cursor:progress; }
.bouton svg{ width:18px; height:18px; }

.bouton .roue{
  width:17px; height:17px;
  border:2.5px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  border-radius:50%;
  animation:tourne .7s linear infinite;
  display:none;
}
.bouton[data-etat="envoi"] .roue{ display:block; }
.bouton[data-etat="envoi"] .avion{ display:none; }

@keyframes tourne{ to{ transform:rotate(360deg); } }

.message{
  margin-top:1.1rem;
  padding:1rem 1.15rem;
  border-radius:16px;
  font-size:.94rem; font-weight:600;
  display:none;
}
.message[data-visible="true"]{ display:block; animation:apparait .45s var(--transition) both; }
.message--ok{ background:#DCE7D6; color:#2F5230; border:1px solid rgba(47,82,48,.18); }
.message--ko{ background:#F5DED9; color:#8E3327; border:1px solid rgba(142,51,39,.18); }

/* Succès plein cadre */
.succes{
  display:none;
  text-align:center;
  padding:clamp(1.5rem,4vw,3rem) 0;
}
.succes[data-visible="true"]{ display:block; animation:apparait .5s var(--transition) both; }
.succes__icone{
  width:74px; height:74px; margin:0 auto 1.25rem;
  border-radius:50%; background:var(--vert);
  display:grid; place-items:center; color:var(--creme-clair);
  animation:pop .6s cubic-bezier(.2,1.5,.4,1) both;
}
.succes__icone svg{ width:36px; height:36px; }
.succes h2{ font-size:clamp(1.4rem,1.1rem + 1.2vw,1.9rem); margin-bottom:.6rem; }
.succes p{ color:var(--encre-doux); margin:0 auto; max-width:26rem; }

/* Pages de texte légal */

.texte{
  flex:1;
  padding:clamp(1rem,3vw,2rem) var(--gouttiere) clamp(3rem,6vw,5rem);
}
.texte__corps{
  width:min(100%, 760px); margin-inline:auto;
}
.texte__corps h1{ font-size:clamp(1.9rem,1.2rem + 2.4vw,2.8rem); margin-bottom:1.5rem; }
.texte__corps h2{
  font-size:clamp(1.15rem,1rem + .6vw,1.4rem);
  margin:2.25rem 0 .6rem;
}
.texte__corps p,
.texte__corps li{ color:var(--encre-doux); }
.texte__corps ul{ padding-left:1.2rem; }
.texte__corps li{ margin-bottom:.4rem; }
.encadre{
  background:var(--beige);
  border-radius:var(--rayon);
  padding:1.1rem 1.35rem;
  font-size:.92rem;
  color:var(--encre);
  margin:1.5rem 0;
}

/* ==========================================================================
   Animations
   ========================================================================== */

@keyframes apparait{
  from{ opacity:0; transform:translateY(14px); }
  to  { opacity:1; transform:none; }
}
@keyframes pop{
  from{ opacity:0; transform:scale(.4); }
  to  { opacity:1; transform:scale(1); }
}
@keyframes respire{
  0%,100%{ transform:translateY(0)   scale(1); }
  50%    { transform:translateY(-3px) scale(1.015); }
}
@keyframes flotte{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%    { transform:translateY(-11px) rotate(3deg); }
}
@keyframes scintille{
  0%,100%{ opacity:.35; transform:scale(.85) rotate(0deg); }
  50%    { opacity:1;   transform:scale(1.15) rotate(20deg); }
}
@keyframes battement{
  0%,100%{ transform:scale(1); }
  14%    { transform:scale(1.22); }
  28%    { transform:scale(1); }
  42%    { transform:scale(1.16); }
  60%    { transform:scale(1); }
}

/* Révélation au défilement */
.reveler{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .75s cubic-bezier(.22,.68,.36,1),
             transform .75s cubic-bezier(.22,.68,.36,1);
  transition-delay:var(--retard, 0ms);
  will-change:opacity, transform;
}
.reveler.est-visible{ opacity:1; transform:none; }

.reveler--zoom{ transform:scale(.965) translateY(20px); }
.reveler.est-visible.reveler--zoom{ transform:none; }

/* Animations en boucle */
.pastille{ animation:respire 4.4s ease-in-out 1.6s infinite; }
.decor--arc,
.decor--point1,
.decor--point2{ animation:flotte 7s ease-in-out infinite; }
.decor--point1{ animation-duration:8.5s; animation-delay:-2s; }
.decor--point2{ animation-duration:6.2s; animation-delay:-4s; }
.decor--etoile1,
.decor--etoile2,
.decor--etincelle{ animation:scintille 3.6s ease-in-out infinite; }
.decor--etoile2{ animation-delay:-1.2s; }
.decor--etincelle{ animation-delay:-2.4s; }
.filet svg{ animation:battement 4.5s ease-in-out 2s infinite; }
.pied__coeur{ animation:battement 4.5s ease-in-out 3s infinite; }

/* Parallaxe légère de la photo (pilotée en JS) */
.heros__visuel img{
  transform:translate3d(0, var(--parallaxe, 0px), 0) scale(1.06);
  transition:transform 120ms linear;
}

/* ==========================================================================
   Adaptatif
   ========================================================================== */

@media (max-width:1080px){
  .contribution__carte{
    grid-template-columns:1fr 1fr;
    row-gap:2rem;
  }
  .colonne:nth-child(3){
    grid-column:1 / -1;
    border-left:none;
    padding-left:0;
    border-top:1px solid rgba(58,85,69,.14);
    padding-top:1.75rem;
  }
  .colonne:nth-child(3) .boite-courriel{ max-width:26rem; }
  /* La colonne devient étroite : les deux « façons » s'empilent. */
  .facons{ grid-template-columns:1fr; gap:1.15rem; }
}

@media (max-width:900px){
  .heros{
    grid-template-columns:1fr;
    padding:0;
    min-height:0;
    text-align:center;
    gap:0;
  }
  .heros__texte{ padding-left:0; }
  .heros__contenu{
    max-width:38rem;
    margin-inline:auto;
    padding-inline:var(--gouttiere);
    padding-bottom:clamp(2rem,5vw,3rem);
  }
  .heros__logo{ margin-inline:auto; }
  .filet{ margin-inline:auto; }
  .accroche,
  .heros__note{ margin-inline:auto; }
  .heros__visuel{
    border-radius:var(--rayon-l) var(--rayon-l) 0 0;
    min-height:clamp(280px, 58vw, 460px);
    margin-inline:var(--gouttiere);
  }
  .heros__visuel::after{
    background:linear-gradient(180deg, var(--creme) 0%, rgba(248,237,223,0) 18%);
  }
  .decor--arc     { left:3%;   top:12%; }
  .decor--etoile1 { left:88%;  top:10%; }
  .decor--etoile2 { left:8%;   top:31%; }
  .decor--point1  { left:92%;  top:36%; }
  .decor--point2  { left:5%;   top:52%; }
  .decor--etincelle{left:90%;  top:56%; }

  .contribution{ padding-top:clamp(2rem,5vw,3rem); }

  .contact__grille{ grid-template-columns:1fr; }
}

@media (max-width:900px){
  /* Les séparateurs « | » deviennent orphelins quand les liens passent à la
     ligne : on les masque et l'espacement fait le travail. */
  .pied__sep{ display:none; }
  .pied__grille{
    grid-template-columns:1fr;
    justify-items:center;
    text-align:center;
    gap:1.25rem;
  }
  .pied__liens{ justify-self:center; justify-content:center; gap:.5rem 1.35rem; }
  .pied__copie{ order:3; }
}

@media (max-width:720px){
  .contribution__carte{ grid-template-columns:1fr; }
  .colonne + .colonne{
    border-left:none; padding-left:0;
    border-top:1px solid rgba(58,85,69,.14);
    padding-top:1.75rem;
  }
  .colonne:nth-child(3){ padding-top:1.75rem; }
  .facons{ grid-template-columns:1fr; gap:1.15rem; }

}

@media (max-width:560px){
  .titre{ font-size:clamp(1.72rem, 1rem + 3vw, 2.2rem); }
}

@media (max-width:420px){
  .pastille{ padding:.85rem 1.35rem; letter-spacing:.06em; }
  .boite-courriel{ font-size:.95rem; }
}

/* Grands écrans : on borne la largeur du contenu */
@media (min-width:1600px){
  .heros{ padding-left:max(var(--gouttiere), calc((100vw - var(--max)) / 2)); }
  .heros__contenu{ max-width:38rem; }
}

/* ------------------------------------------------ Mouvement réduit --- */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  .reveler{ opacity:1; transform:none; }
  .heros__visuel img{ transform:scale(1.02); }
}

/* ------------------------------------------------------- Impression --- */

@media print{
  .decor, .pastille{ animation:none; }
  body{ background:#fff; }
}