/* ==========================================================================
   Podkilla — charte issue des 3 slides Canva
   Titres : Open Sauce One (SIL OFL, auto-hébergée)
   Textes : pile système (system-ui) — rend SF Pro sur Apple, Segoe UI sur
   Windows, sans embarquer la police d'Apple (sa licence l'interdit sur le web).
   ========================================================================== */

@font-face { font-family:"Open Sauce One"; src:url("fonts/OpenSauceOne-Regular.woff2") format("woff2");   font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Open Sauce One"; src:url("fonts/OpenSauceOne-Medium.woff2") format("woff2");    font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Open Sauce One"; src:url("fonts/OpenSauceOne-SemiBold.woff2") format("woff2");  font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Open Sauce One"; src:url("fonts/OpenSauceOne-Bold.woff2") format("woff2");      font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Open Sauce One"; src:url("fonts/OpenSauceOne-BoldItalic.woff2") format("woff2");font-weight:700; font-style:italic; font-display:swap; }
@font-face { font-family:"Open Sauce One"; src:url("fonts/OpenSauceOne-ExtraBold.woff2") format("woff2"); font-weight:800; font-style:normal; font-display:swap; }

:root{
  /* couleurs relevées au pixel sur les slides */
  --vert-clair:#bdcd6e;
  --vert-fonce:#4a5514;
  --vert-accent:#789a1c;
  --encre:#2b2c30;
  --encre-doux:#5f6063;
  --fond:#fdfdfa;          /* blanc laiteux, très légèrement chaud */
  --fond-pur:#fefefe;
  --trait:#e8eadf;

  --titre:"Open Sauce One", system-ui, sans-serif;
  --texte:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --gouttiere:clamp(20px, 5vw, 76px);
  --max:1440px;
  --courbe:cubic-bezier(.22,.68,.16,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--fond); color:var(--encre);
  font-family:var(--texte); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* grain papier + halo vert très large en haut de page */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity:.035; mix-blend-mode:multiply;
}
main,header,footer{ position:relative; z-index:1; }

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

.enveloppe{ max-width:var(--max); margin:0 auto; padding:0 var(--gouttiere); }

/* ---------------------------------------------------------------- en-tête */
.entete{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:clamp(24px,4vw,62px);
  height:8.05vw; min-height:56px; padding:0 5.71vw;
  background:var(--fond);
}
.marque{
  font-family:var(--titre); font-weight:800; font-size:2.34vw;
  letter-spacing:-.02em; color:var(--vert-fonce); text-decoration:none;
}
.nav{ display:flex; gap:clamp(18px,2.6vw,44px); }
.nav a{
  font-size:1.32vw; color:var(--vert-fonce); text-decoration:none;
  position:relative; padding:4px 0;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--vert-clair); transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--courbe);
}
.nav a:hover::after,.nav a[aria-current="page"]::after{ transform:scaleX(1); }
.entete__icone{ margin-left:auto; width:3.1vw; height:auto; image-rendering:pixelated; }

/* -------------------------------------------------------------------- hero
   Géométrie relevée au pixel sur le PNG Canva (1366 x 768) puis convertie en
   vw : 1 px de la maquette = 100/1366 vw. Le premier écran garde donc
   exactement les proportions, les tailles et les espaces du PNG quelle que
   soit la largeur de l'écran — le titre et les photos ne se rapprochent
   jamais. Les photos sont en 16/9 fixe et ne se redimensionnent pas
   indépendamment : elles ne font que se translater.                        */

.hero{ position:relative; height:48.17vw; overflow:hidden; }

.hero__tasse{
  position:absolute; left:-10.4vw; top:5.64vw; width:24.45vw;
  image-rendering:pixelated;
  transition:transform 1.05s var(--courbe), opacity .75s ease;
  will-change:transform,opacity;
}

.hero__titrage{
  position:absolute; top:11.13vw; left:0; width:100%; z-index:2;
  padding:0 5.71vw; display:flex; justify-content:center;
}
.hero__titre{
  margin:0; font-family:var(--titre); font-weight:700;
  font-size:5.92vw; line-height:1.02; letter-spacing:0;
  color:var(--vert-clair); text-align:center;
  transition:transform 1.05s var(--courbe);
  will-change:transform,clip-path;
}
.hero__titre em{ font-style:italic; font-weight:700; }
/* le + et les apostrophes fermantes partagent le vert d'accent */
.hero__titre .plus,
.hero__titre .apo{ color:var(--vert-accent); font-style:normal; }

/* photos : position finale de la maquette, format cinéma verrouillé */
.hero__cartes{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.carte{
  position:absolute; margin:0; aspect-ratio:16/9;
  border-radius:1.9vw; overflow:hidden;
  box-shadow:0 1.9vw 4.4vw -2vw rgba(43,44,48,.3);
  transition:transform 1.15s var(--courbe);
  will-change:transform;
}
.carte img{ width:100%; height:100%; object-fit:cover; }
/* relevé exact sur le slide 2 (coordonnées du PNG, moins la hauteur d'en-tête) :
   A  x 755  y 236  l 441   |   B  x 1018 y 159 l 441 (déborde à droite)
   C  x 897  y 376  l 412                                                   */
/* Empilement, de l'avant vers l'arriere : C l'ecran de traitement, puis A la photo
   d'enregistrement, puis B le montage Premiere. Seul l'ordre des calques change ici,
   les positions relevees sur la maquette restent intactes. */
.carte--a{ left:55.27vw; top:9.22vw;  width:32.28vw; z-index:2; }
.carte--b{ left:74.52vw; top:3.59vw;  width:32.28vw; z-index:1; }
.carte--c{ left:65.66vw; top:19.47vw; width:30.16vw; z-index:3; }

/* au repos : tout le bloc photo est décalé de 28,1 vw vers la droite, ce qui
   reproduit exactement le cadrage coupé du premier slide. Aucune mise à
   l'échelle : seule une translation. */
.carte{ transform:translateX(28.1vw); }
.hero.est-active .carte{ transform:translateX(0); }
.hero.est-active .carte--a{ transition-delay:.06s; }
.hero.est-active .carte--b{ transition-delay:.14s; }
.hero.est-active .carte--c{ transition-delay:.22s; }

.hero.est-active .hero__tasse{ transform:translateX(-150%); opacity:0; }
.hero.est-active .hero__titre{ animation:reformer 1s var(--courbe) forwards; }
.hero.est-gauche .hero__titrage{ justify-content:flex-start; }
.hero.est-gauche .hero__titre{ text-align:left; }

@keyframes reformer{
  0%   { clip-path:inset(0 0 0 0);    transform:translateX(0); }
  34%  { clip-path:inset(0 0 0 100%); transform:translateX(-2%); }
  35%  { clip-path:inset(0 100% 0 0); transform:translateX(0); }
  100% { clip-path:inset(-12% -12% -12% -12%); transform:translateX(0); }
}

/* ------------------------------------------------- bandeau « en local » */
.local{ padding:clamp(70px,9vw,130px) 0 clamp(50px,6vw,90px); }
.local__grille{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,96px);
  align-items:start;
}
.local__tete{ display:flex; gap:26px; align-items:flex-start; }
.appicone{
  flex:0 0 auto; width:104px; height:104px; border-radius:23%;
  background:var(--fond-pur);
  box-shadow:0 14px 34px -16px rgba(43,44,48,.22);
  display:grid; place-items:center; padding:9px;
}
.appicone img{ width:100%; image-rendering:pixelated; }
h2{
  margin:0 0 14px; font-family:var(--titre); font-weight:700;
  font-size:clamp(28px,3.1vw,42px); line-height:1.1; letter-spacing:-.02em;
  color:var(--vert-accent);
}
h2 .accent{ color:var(--vert-fonce); }
.local__texte{ margin:0; color:var(--encre); max-width:46ch; }
.compteur{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  margin-top:38px;
  font-size:15.5px; color:var(--encre-doux);
}
.pastille{
  width:10px; height:10px; border-radius:50%; background:var(--vert-clair);
  align-self:center; animation:pulse 2.6s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.42; transform:scale(.82);} }
.compteur strong{
  font-family:var(--titre); font-weight:700; font-size:19px; color:var(--encre);
  font-variant-numeric:tabular-nums;
}

/* usages */
.usages__tete{ display:flex; align-items:center; gap:16px; margin-bottom:26px; }
.usages__tete h2{ margin:0; }
.usages__tete h2 strong{ color:var(--vert-fonce); font-weight:800; }
.dossier{ width:46px; flex:0 0 auto; image-rendering:pixelated; }
.usages{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.usages li{
  display:flex; gap:15px; align-items:center;
  padding:8px 0;
}
.usages li img{
  flex:0 0 auto; width:28px; height:28px; image-rendering:pixelated;
}


/* ---------------------------------------------------------------- tarifs */
.tarifs{ padding:clamp(60px,8vw,110px) 0; }
.tarifs__intro{ max-width:56ch; margin:0 0 44px; }
/* Grille tarifaire — structure reprise de la référence : une carte blanche, dont
   le haut est une feuille distincte (panneau du prix, sous-titre, bouton) qui
   porte sa propre ombre et se détache du bas de la carte où vivent les
   fonctionnalités. C'est cette ombre intermédiaire, et non un trait, qui sépare
   les deux moitiés. */
.tarifs{ position:relative; }
/* Fond légèrement teinté sous la seule section des tarifs : des cartes blanches
   sur un fond quasi blanc ne se détachent pas, et c'est de ce contraste que
   dépend tout le relief de la maquette. */
.tarifs::before{
  content:""; position:absolute; inset:0; background:rgba(74,85,20,.05); z-index:0;
}
.tarifs > .enveloppe{ position:relative; z-index:1; }

.tarifs__grille{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:30px; align-items:stretch;
}

.offre{
  background:#ffffff; border-radius:30px; padding:0 0 34px;
  display:flex; flex-direction:column;
  box-shadow:0 26px 46px -26px rgba(43,44,48,.30), 0 3px 8px -4px rgba(43,44,48,.07);
}

/* La feuille du haut : même blanc que la carte, mais posée dessus et ombrée, ce
   qui creuse la ligne de partage sans dessiner la moindre barre. */
.offre__haut{
  background:#ffffff; border-radius:30px; padding:20px 20px 26px;
  position:relative; z-index:1;
  box-shadow:0 16px 26px -18px rgba(43,44,48,.45);
}

.offre__panneau{
  background:rgba(74,85,20,.075); border-radius:24px; padding:18px 20px 22px;
  display:flex; flex-direction:column; gap:26px; min-height:132px;
}
.offre--phare .offre__panneau{ background:rgba(120,154,28,.17); }

.offre__badge{
  align-self:flex-start; background:#ffffff; color:var(--vert-fonce);
  border-radius:999px; padding:7px 15px;
  font-family:var(--titre); font-weight:600; font-size:11.5px;
  letter-spacing:.09em; text-transform:uppercase; white-space:nowrap;
}

/* Le prix en vert de marque : c'est le chiffre qui doit accrocher l'œil dans le
   panneau, et le vert foncé tient le contraste sur les trois fonds de panneau,
   y compris le plus teinté des trois. L'unité reste en encre pour que le nombre
   sorte seul. */
.prix{
  margin:0; font-family:var(--titre); font-weight:800; font-size:40px;
  color:var(--vert-fonce); letter-spacing:-.035em; line-height:1;
  display:flex; align-items:baseline;
}
.prix span{
  font-size:17px; font-weight:700; color:var(--encre); letter-spacing:-.01em;
}
.prix--devis{ font-size:36px; }

.offre__genre{
  margin:24px 4px 0; font-family:var(--titre); font-style:italic;
  font-weight:400; font-size:15px; color:var(--encre-doux);
}

.offre__haut .bouton{ margin-top:22px; width:100%; padding:17px 20px; }
.offre__haut .bouton--plein{ box-shadow:0 16px 26px -12px rgba(74,85,20,.55); }
.essai{ margin:12px 0 0; font-size:13px; color:var(--encre-doux); text-align:center; }

.offre__liste{
  list-style:none; margin:30px 0 0; padding:0 26px;
  display:grid; gap:17px; font-size:15px;
}
.offre__liste li{ display:flex; gap:13px; align-items:flex-start; }
/* Le pictogramme du savoir-faire remplace la coche : le jeu d'icônes distingue la
   voix, l'image, la coupe et l'écriture, ce qui se lit d'un coup d'œil là où six
   coches identiques ne disent rien. Même taille et même rendu pixelisé que la
   liste d'usages de l'accueil. */
.offre__liste li img{
  flex:0 0 auto; width:27px; height:27px; image-rendering:pixelated; margin-top:-3px;
}
.offre__liste li span{ flex:1; }
.offre__liste li strong{ font-weight:700; display:block; }
/* La précision d'une étape passe sous son nom, en retrait de couleur, pour que les
   quatre étapes se lisent d'abord comme quatre mots. */
.offre__liste .detail{ display:block; margin-top:2px; color:var(--encre-doux); font-size:14px; }

@media (max-width:1040px){
  .tarifs__grille{ grid-template-columns:1fr; gap:24px; }
}

.bouton{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 28px; border-radius:999px; text-decoration:none;
  font-family:var(--titre); font-weight:600; font-size:16.5px;
  transition:transform .25s var(--courbe), box-shadow .25s var(--courbe);
}
.bouton--plein{ background:var(--vert-fonce); color:#fefefe; }
.bouton--plein:hover{ transform:translateY(-2px); box-shadow:0 16px 30px -16px rgba(74,85,20,.75); }
.bouton--ligne{ border:1.5px solid var(--vert-fonce); color:var(--vert-fonce); }
.bouton--ligne:hover{ background:rgba(74,85,20,.06); }

.appel{ text-align:center; padding:clamp(60px,8vw,110px) 0; }
.appel h2{ margin-bottom:18px; }
.appel__actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:26px; }
.appel__note{ margin-top:16px; font-size:14.5px; color:var(--encre-doux); }

/* ---------------------------------------------------------------- pied */
.pied{
  padding:44px 0 60px; margin-top:40px;
  font-size:15px; color:var(--encre-doux);
}
.pied__grille{ display:flex; gap:34px; flex-wrap:wrap; align-items:center; }
.pied a{ text-decoration:none; }
.pied a:hover{ color:var(--vert-accent); }
.pied__legal{ margin-left:auto; }

/* ---------------------------------------------------------------- mobile */
@media (max-width:900px){
  .entete{ height:auto; min-height:0; padding:18px var(--gouttiere); }
  .marque{ font-size:26px; }
  .nav a{ font-size:16px; }
  .entete__icone{ width:34px; }
  .hero{ height:auto; padding:40px 0 24px; }
  .hero__tasse{ position:relative; left:auto; top:auto; width:200px; transform:translateX(-24%); opacity:1; margin-bottom:-24px; }
  .hero.est-active .hero__tasse{ transform:translateX(-24%); opacity:1; }
  .hero__titrage{ position:relative; top:auto; padding:0 var(--gouttiere); justify-content:flex-start; }
  .hero__titre{ font-size:clamp(34px,8.6vw,54px); text-align:left; animation:none !important; }
  .hero__cartes{ position:relative; inset:auto; display:flex; gap:10px; margin-top:36px; padding:0 var(--gouttiere); }
  .carte{ position:relative; width:33.33%; left:auto; top:auto; border-radius:12px;
          box-shadow:0 12px 26px -14px rgba(43,44,48,.3); transform:none !important; }
  .local__grille{ grid-template-columns:1fr; }
  .local__separateur{ display:none; }
  .tarifs__grille{ grid-template-columns:1fr; }
  .entete{ gap:16px; flex-wrap:wrap; }
  .nav{ order:3; width:100%; overflow-x:auto; }
}

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

/* ==========================================================================
   Pages intérieures : Engagements, Tarifs, Communauté, articles
   ========================================================================== */

.tete-page{ padding:clamp(50px,6vw,90px) 0 clamp(28px,3.4vw,48px); }
.tete-page h1{
  margin:0 0 18px; font-family:var(--titre); font-weight:700;
  font-size:clamp(36px,4.6vw,64px); line-height:1.04; letter-spacing:-.025em;
  color:var(--vert-fonce); max-width:19ch;
}
.tete-page h1 em{ font-style:italic; }
.tete-page h1 .apo,.tete-page h1 .plus{ color:inherit; font-style:normal; }
.chapo{ margin:0; max-width:62ch; font-size:19px; color:var(--encre); }

.prose{ max-width:68ch; }
.prose h2{ margin:52px 0 14px; }
.prose h3{
  margin:34px 0 10px; font-family:var(--titre); font-weight:700; font-size:22px;
  color:var(--vert-fonce);
}
.prose p{ margin:0 0 18px; }
.prose ul,.prose ol{ margin:0 0 20px; padding-left:22px; }
.prose li{ margin-bottom:8px; }
.prose strong{ color:var(--vert-fonce); }
.prose a{ color:var(--vert-accent); text-decoration:underline; text-underline-offset:3px; }
.prose a.fiche{ color:inherit; text-decoration:none; }

/* --- récit fondateur --- */
.recit{ padding:clamp(30px,4vw,60px) 0 clamp(50px,6vw,90px); }
.recit__grille{ display:grid; grid-template-columns:minmax(0,404px) minmax(0,1fr); gap:clamp(34px,5vw,72px); align-items:start; }
.recit__photo{ border-radius:22px; overflow:hidden; aspect-ratio:4/5; background:rgba(74,85,20,.06); }
.recit__photo img{ width:100%; height:100%; object-fit:cover; }
.recit__photo picture{ display:block; width:100%; height:100%; }
.recit__legende{ margin:14px 0 0; font-size:14.5px; color:var(--encre-doux); }
.recit__texte{ max-width:62ch; }
.recit__texte p{ margin:0 0 18px; }
.recit__texte p:first-child::first-letter{
  font-family:var(--titre); font-weight:700; font-size:3.1em; line-height:.86;
  float:left; margin:6px 10px 0 0; color:var(--vert-accent);
}
.signature{ margin-top:26px; font-family:var(--titre); font-weight:700; color:var(--vert-fonce); }
.signature span{ display:block; font-family:var(--texte); font-weight:400; font-size:15px; color:var(--encre-doux); }

/* --- engagements --- */
.engagements{ padding:clamp(40px,5vw,80px) 0; }
.engagements__grille{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(26px,3.4vw,48px); }
.engagement{ display:flex; gap:16px; align-items:flex-start; }
.engagement img{ flex:0 0 auto; width:34px; height:34px; image-rendering:pixelated; margin-top:2px; }
.engagement h3{ margin:0 0 7px; font-family:var(--titre); font-weight:700; font-size:19px; color:var(--vert-fonce); }
.engagement p{ margin:0; font-size:16px; }

/* --- appel sous le compteur --- */
.appel-court{ display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; }
.appel-court .bouton{ padding:13px 24px; font-size:15.5px; }
.appel-court__note{ width:100%; margin:12px 0 0; font-size:14px; color:var(--encre-doux); }

/* --- hub communauté --- */
.hub{ padding:clamp(20px,3vw,44px) 0 clamp(60px,7vw,110px); }
.hub__famille{ margin-bottom:clamp(40px,5vw,70px); }
.hub__famille > h2{ margin:0 0 6px; }
.hub__intro{ margin:0 0 24px; max-width:62ch; color:var(--encre-doux); }
.hub__grille{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:20px; }
.fiche{
  display:block; padding:26px 26px 24px; border-radius:18px; text-decoration:none;
  background:rgba(74,85,20,.045); transition:background .25s var(--courbe), transform .25s var(--courbe);
}
.fiche:hover{ background:rgba(120,154,28,.1); transform:translateY(-2px); }
.fiche h3{ margin:0 0 8px; font-family:var(--titre); font-weight:700; font-size:19px; color:var(--vert-fonce); line-height:1.25; }
.fiche p{ margin:0; font-size:15.5px; color:var(--encre-doux); }
.fiche--prevu{ background:transparent; padding-left:0; padding-right:0; }
.fiche--prevu:hover{ transform:none; background:transparent; }
.fiche--prevu h3{ color:var(--encre-doux); }
.fiche__etat{ display:inline-block; margin-top:12px; font-size:12.5px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--vert-accent); }

/* --- article --- */
.article__meta{ margin:0 0 8px; font-size:14.5px; color:var(--encre-doux); letter-spacing:.03em; }
.sommaire{ margin:34px 0 44px; padding:24px 26px; border-radius:18px; background:rgba(74,85,20,.045); }
.sommaire h2{ margin:0 0 12px !important; font-size:17px !important; color:var(--vert-fonce) !important; }
.sommaire ol{ margin:0; padding-left:20px; font-size:16px; }
.sommaire a{ color:var(--encre); text-decoration:none; }
.sommaire a:hover{ color:var(--vert-accent); }
.encadre{
  margin:34px 0; padding:26px 28px; border-radius:18px; background:rgba(120,154,28,.085);
}
.encadre h3{ margin:0 0 8px !important; }
.encadre p:last-child{ margin-bottom:0; }
.tableau{ overflow-x:auto; margin:26px 0; }
.tableau table{ border-collapse:collapse; width:100%; min-width:520px; font-size:16px; }
.tableau th{ text-align:left; font-family:var(--titre); font-weight:700; color:var(--vert-fonce); padding:12px 14px; }
.tableau td{ padding:12px 14px; }
.tableau tbody tr:nth-child(odd){ background:rgba(74,85,20,.04); }

@media (max-width:900px){
  .recit__grille{ grid-template-columns:1fr; }
  .engagements__grille{ grid-template-columns:1fr; }
  .tete-page h1{ max-width:none; }
}

/* ------------------------------------------------- sondage d'audience */
/* Une seule question, posée une fois, jamais reposée à qui a répondu. Volontairement
   petit et en bas d'écran : ce n'est pas une porte, c'est une question. */
.sondage{
  position:fixed; left:clamp(16px,4vw,32px); bottom:clamp(16px,4vw,32px); z-index:60;
  width:min(360px, calc(100vw - 32px));
  background:var(--fond-pur); color:var(--encre);
  border-radius:20px; padding:22px 22px 18px;
  box-shadow:0 30px 60px -28px rgba(43,44,48,.45);
  opacity:0; transform:translateY(14px);
  transition:opacity .45s var(--courbe), transform .45s var(--courbe);
}
.sondage[hidden]{ display:none; }
.sondage.est-visible{ opacity:1; transform:translateY(0); }
.sondage__titre{
  font-family:var(--titre); font-weight:600; font-size:18px;
  color:var(--vert-fonce); margin:0 0 4px;
}
.sondage__note{ margin:0 0 16px; font-size:14px; color:var(--encre-doux); }
.sondage__choix{ display:flex; flex-direction:column; gap:8px; }
.sondage__choix button{
  font-family:var(--titre); font-weight:600; font-size:15.5px;
  padding:12px 18px; border-radius:999px; cursor:pointer;
  border:1.5px solid var(--vert-fonce); background:transparent; color:var(--vert-fonce);
  transition:background .2s var(--courbe);
}
.sondage__choix button:hover{ background:rgba(74,85,20,.07); }
.sondage__fermer{
  position:absolute; top:12px; right:14px;
  border:0; background:transparent; cursor:pointer;
  font-size:20px; line-height:1; color:var(--encre-doux);
}
.sondage__merci{ margin:0; font-size:15px; color:var(--encre); }

/* --------------------------------------- marche à suivre (première ouverture) */
/* Une étape par bloc, numérotée en gros : quelqu'un qui suit ces étapes a l'écran
   d'avertissement de macOS sous les yeux et cherche où il en est. Le numéro doit
   se retrouver d'un coup d'œil, sans relire. */
.etapes{ padding:0 0 clamp(50px,7vw,90px); }
.marche{ list-style:none; margin:0; padding:0; display:grid; gap:34px; max-width:68ch; }
.marche li{ display:flex; gap:22px; align-items:flex-start; }
.marche__num{
  flex:0 0 auto; width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(120,154,28,.16); color:var(--vert-fonce);
  font-family:var(--titre); font-weight:800; font-size:20px;
}
.marche h2{ margin:6px 0 8px; font-size:21px; color:var(--vert-fonce); }
.marche p{ margin:0 0 8px; }
/* L'action à faire est ce que l'œil doit trouver en dernier dans le bloc : elle est
   donc la seule ligne colorée, et jamais noyée dans le paragraphe d'explication. */
.marche__action{ color:var(--vert-accent); }

@media (max-width:640px){
  .marche li{ gap:16px; }
  .marche__num{ width:38px; height:38px; font-size:17px; }
}
/* Le lien d'aide vit dans une note grise sous les boutons : il doit se voir sans
   voler la vedette au téléchargement lui-même. */
.lien-aide{ color:var(--vert-accent); text-decoration:none; border-bottom:1px solid rgba(120,154,28,.4); }
.lien-aide:hover{ border-bottom-color:var(--vert-accent); }

/* ------------------------------------------------- page de premiers pas */
.tuto__statut{
  margin:0 0 14px; font-family:var(--titre); font-weight:600; font-size:15px;
  color:var(--vert-accent);
}
.tuto__repli{ margin-top:20px; font-size:14.5px; color:var(--encre-doux); }
.tuto__repli a{ color:var(--vert-accent); }

/* L'avertissement Apple est encadré : c'est la seule chose de cette page qui, si elle
   n'est pas lue, fait supprimer l'application au lieu de l'ouvrir. */
.tuto__alerte{
  background:rgba(120,154,28,.12); border-radius:20px; padding:26px 28px; margin-bottom:34px;
  max-width:68ch;
}
.tuto__alerte h2{ margin:0 0 10px; font-size:21px; color:var(--vert-fonce); }
.tuto__alerte p{ margin:0; }

.tuto__titre{ margin:0 0 34px; font-size:clamp(26px,3vw,34px); color:var(--vert-accent); }

.tuto{ list-style:none; margin:0; padding:0; display:grid; gap:56px; }
.tuto > li{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:38px; align-items:center; }
.tuto__texte{ display:flex; gap:22px; align-items:flex-start; }
.tuto__texte h3{ margin:6px 0 8px; font-family:var(--titre); font-size:21px; color:var(--vert-fonce); }
.tuto__texte p{ margin:0; }

.tuto__image{ margin:0; }
.tuto__image img{ display:block; width:100%; height:auto; border-radius:18px; box-shadow:0 24px 44px -26px rgba(43,44,48,.4); }
/* Emplacement en attente d'une vraie capture. Volontairement visible et explicite :
   une page qui part en ligne avec un cadre vide se remarque, une image inventée non. */
.tuto__attente{
  display:grid; place-items:center; text-align:center; padding:26px;
  aspect-ratio:11/9; border-radius:18px;
  background:rgba(74,85,20,.05); color:var(--encre-doux); font-size:14.5px;
}

@media (max-width:900px){
  .tuto > li{ grid-template-columns:1fr; gap:22px; }
}