/* =============================================================
   Vigie — feuille de style unique
   Palette reprise des applications (cohérence visuelle produit/site)
   Mobile d'abord : tout est écrit pour le téléphone, puis élargi.
   ============================================================= */

:root{
  /* Couleurs — volontairement peu nombreuses */
  --ink:        #1C2321;  /* texte principal, presque noir */
  --ink-soft:   #4A524F;  /* texte secondaire */
  --concrete:   #EDEBE6;  /* fond de page */
  --concrete-2: #DFDBD2;  /* séparations, fonds discrets */
  --white:      #FFFFFF;
  --amber:      #F2A93B;  /* accent : boutons d'action */
  --amber-dark: #8A5A05;  /* même accent, lisible sur fond clair */
  --steel:      #2E5480;  /* liens, éléments secondaires */
  --steel-dark: #244266;
  --green:      #2F8F4E;
  --green-bg:   #E4F3E8;
  --red:        #C13D26;
  --red-bg:     #FBE7E2;

  /* Rythme vertical */
  --gap:   1rem;
  --gap-2: 1.5rem;
  --gap-3: 2.5rem;
  --gap-4: 4rem;

  --radius: 10px;
  --largeur-max: 62rem;
  --largeur-texte: 38rem;
}

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

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:4.5rem; /* pour que les ancres ne passent pas sous l'en-tête */
}

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

body{
  margin:0;
  background:var(--concrete);
  color:var(--ink);
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

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

h1,h2,h3{
  font-family:'Barlow Condensed', 'Inter', -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight:700;
  line-height:1.12;
  margin:0 0 var(--gap) 0;
  letter-spacing:0.01em;
}
h1{ font-size:2.1rem; }
h2{ font-size:1.75rem; }
h3{ font-size:1.25rem; font-family:'Inter', sans-serif; font-weight:700; line-height:1.3; }

p{ margin:0 0 var(--gap) 0; max-width:var(--largeur-texte); }

a{ color:var(--steel); text-decoration:underline; text-underline-offset:2px; }
a:hover{ color:var(--steel-dark); }

/* Anneau de focus visible : indispensable pour la navigation au clavier */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible{
  outline:3px solid var(--steel);
  outline-offset:2px;
  border-radius:4px;
}

/* Lien d'évitement pour les lecteurs d'écran et le clavier */
.saut-contenu{
  position:absolute; left:-9999px;
  background:var(--ink); color:var(--white);
  padding:.75rem 1rem; z-index:100; text-decoration:none;
}
.saut-contenu:focus{ left:.5rem; top:.5rem; }

/* ---------- Mise en page ---------- */

.contenu{
  width:100%;
  max-width:var(--largeur-max);
  margin:0 auto;
  padding:0 1.25rem;
}

section{ padding:var(--gap-3) 0; }
section + section{ border-top:1px solid var(--concrete-2); }

.section-clair{ background:var(--white); }

.surtitre{
  font-family:'Inter', sans-serif;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin:0 0 .5rem 0;
}

.chapeau{
  font-size:1.1rem;
  color:var(--ink-soft);
  max-width:var(--largeur-texte);
}

/* ---------- En-tête ---------- */

.entete{
  position:sticky; top:0; z-index:50;
  background:var(--concrete);
  border-bottom:1px solid var(--concrete-2);
}
.entete .contenu{
  display:flex; align-items:center; justify-content:space-between;
  min-height:3.5rem; gap:1rem;
}
.marque{
  display:flex; align-items:baseline; gap:.5rem;
  text-decoration:none; color:var(--ink);
}
.marque-nom{
  font-family:'Barlow Condensed', sans-serif;
  font-weight:800; font-size:1.5rem;
  text-transform:uppercase; letter-spacing:.04em;
}
.marque-studio{
  font-size:.72rem; color:var(--ink-soft); white-space:nowrap;
}
.nav-liens{
  display:flex; align-items:center; gap:1.1rem;
  font-size:.9rem;
}
.nav-liens a{ text-decoration:none; color:var(--ink); }
.nav-liens a:hover{ text-decoration:underline; }
/* Sur téléphone on masque les ancres secondaires : le pouce descend, il ne navigue pas */
.nav-liens .nav-secondaire{ display:none; }
@media (min-width:820px){
  .nav-liens .nav-secondaire{ display:inline; }
}

/* ---------- Boutons ---------- */

.bouton{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px;                 /* cible tactile confortable */
  padding:.8rem 1.4rem;
  border:2px solid transparent;
  border-radius:var(--radius);
  font-family:'Inter', sans-serif;
  font-size:1rem; font-weight:600;
  text-decoration:none; cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
}
.bouton-principal{
  background:var(--ink); color:var(--white); border-color:var(--ink);
}
.bouton-principal:hover{ background:#000; color:var(--white); }
.bouton-secondaire{
  background:transparent; color:var(--ink); border-color:var(--ink);
}
.bouton-secondaire:hover{ background:var(--concrete-2); color:var(--ink); }

.boutons{
  display:flex; flex-wrap:wrap; gap:.75rem; margin-top:var(--gap-2);
}

/* ---------- Accroche ---------- */

.accroche{ padding:var(--gap-3) 0 var(--gap-3); }
.accroche h1{ max-width:20ch; }
.accroche .chapeau{ font-size:1.15rem; }

.accroche-note{
  margin-top:var(--gap-2);
  font-size:.9rem; color:var(--ink-soft);
  border-left:3px solid var(--amber);
  padding-left:.85rem;
  max-width:var(--largeur-texte);
}

/* ---------- Le constat ---------- */

.constat-liste{
  display:grid; gap:var(--gap);
  grid-template-columns:1fr;
  margin-top:var(--gap-2);
}
@media (min-width:760px){
  .constat-liste{ grid-template-columns:repeat(3, 1fr); }
}
.constat{
  background:var(--white);
  border:1px solid var(--concrete-2);
  border-left:4px solid var(--red);
  border-radius:var(--radius);
  padding:1.15rem;
}
.constat h3{ margin-bottom:.4rem; }
.constat p{ margin:0; font-size:.96rem; color:var(--ink-soft); }

/* ---------- Produits ---------- */
/* Chaque produit est un <article class="produit">. Pour en ajouter un,
   on copie le bloc entier et on remplace le texte. Rien d'autre à toucher. */

.produits{ display:grid; gap:var(--gap-3); }

.produit{
  background:var(--white);
  border:1px solid var(--concrete-2);
  border-radius:var(--radius);
  padding:1.5rem 1.25rem;
}
@media (min-width:760px){
  .produit{ padding:2rem; }
}

.produit-entete{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.6rem;
  margin-bottom:.35rem;
}
.produit-nom{
  font-family:'Barlow Condensed', sans-serif;
  font-weight:700; font-size:1.9rem;
  text-transform:uppercase; letter-spacing:.02em;
  margin:0;
}
.etiquette{
  display:inline-block;
  font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:.25rem .55rem; border-radius:99px;
  background:var(--concrete-2); color:var(--ink-soft);
}
.etiquette-actif{ background:var(--green-bg); color:#1E6135; }

.produit-resume{
  font-size:1.05rem; font-weight:600;
  max-width:var(--largeur-texte);
  margin-bottom:var(--gap-2);
}

.produit-corps{ display:grid; gap:var(--gap-2); }
@media (min-width:900px){
  .produit-corps{ grid-template-columns:1fr 1fr; gap:var(--gap-2) var(--gap-3); }
}

.bloc-titre{
  font-size:.78rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-soft);
  margin:0 0 .5rem 0;
}

.liste-nette{ list-style:none; margin:0; padding:0; }
.liste-nette li{
  position:relative; padding-left:1.4rem; margin-bottom:.55rem;
  font-size:.98rem;
}
.liste-nette li::before{
  content:''; position:absolute; left:0; top:.55em;
  width:.5rem; height:.5rem; border-radius:2px; background:var(--amber);
}

.encadre-benefice{
  background:var(--green-bg);
  border-radius:var(--radius);
  padding:1rem 1.15rem;
  margin-top:var(--gap-2);
}
.encadre-benefice p{ margin:0; font-size:.98rem; }
.encadre-benefice strong{ color:#1E6135; }

/* Emplacement des captures d'écran à fournir */
.capture{
  background:var(--concrete);
  border:2px dashed var(--concrete-2);
  border-radius:var(--radius);
  min-height:180px;
  display:flex; align-items:center; justify-content:center;
  text-align:center; padding:1rem;
  color:var(--ink-soft); font-size:.85rem;
}
.capture img{ border-radius:6px; }

.captures-serie{
  display:grid; gap:.75rem; grid-template-columns:1fr;
  margin-top:var(--gap-2);
}
@media (min-width:600px){
  .captures-serie{ grid-template-columns:repeat(2, 1fr); }
}

/* Emplacement laissé vide volontairement pour des résultats chiffrés mesurés */
.resultats-vides{
  border:1px dashed var(--concrete-2);
  border-radius:var(--radius);
  padding:1rem;
  margin-top:var(--gap-2);
  font-size:.9rem; color:var(--ink-soft);
}

/* ---------- Étapes ---------- */

.etapes{
  counter-reset:etape;
  list-style:none; margin:var(--gap-2) 0 0 0; padding:0;
  display:grid; gap:var(--gap); grid-template-columns:1fr;
}
@media (min-width:760px){
  .etapes{ grid-template-columns:repeat(3, 1fr); }
}
.etapes li{
  counter-increment:etape;
  background:var(--white);
  border:1px solid var(--concrete-2);
  border-radius:var(--radius);
  padding:1.15rem;
}
.etapes li::before{
  content:counter(etape);
  display:flex; align-items:center; justify-content:center;
  width:2rem; height:2rem; margin-bottom:.6rem;
  background:var(--ink); color:var(--white);
  border-radius:50%;
  font-family:'Barlow Condensed', sans-serif; font-weight:700; font-size:1.1rem;
}
.etapes h3{ font-size:1.05rem; margin-bottom:.3rem; }
.etapes p{ margin:0; font-size:.95rem; color:var(--ink-soft); }

/* ---------- Questions fréquentes ---------- */

.question{
  background:var(--white);
  border:1px solid var(--concrete-2);
  border-radius:var(--radius);
  margin-bottom:.6rem;
}
.question summary{
  cursor:pointer; padding:.9rem 1.1rem;
  font-weight:600; list-style:none;
  min-height:48px; display:flex; align-items:center; gap:.5rem;
}
.question summary::-webkit-details-marker{ display:none; }
.question summary::before{
  content:'+'; font-weight:700; color:var(--amber-dark); flex:0 0 auto;
}
.question[open] summary::before{ content:'–'; }
.question .reponse{ padding:0 1.1rem 1rem 2.35rem; }
.question .reponse p:last-child{ margin-bottom:0; }

/* ---------- Formulaire ---------- */

.formulaire{
  background:var(--white);
  border:1px solid var(--concrete-2);
  border-radius:var(--radius);
  padding:1.25rem;
  max-width:34rem;
  margin-top:var(--gap-2);
}
@media (min-width:600px){ .formulaire{ padding:1.75rem; } }

.champ{ margin-bottom:1.1rem; }
.champ label{
  display:block; font-weight:600; font-size:.93rem; margin-bottom:.35rem;
}
.champ .aide{ font-weight:400; color:var(--ink-soft); font-size:.85rem; }

.champ input,
.champ select,
.champ textarea{
  width:100%;
  font-family:inherit; font-size:16px; /* 16px : empêche le zoom automatique sur iPhone */
  color:var(--ink);
  background:var(--white);
  border:1px solid #9BA29F;
  border-radius:8px;
  padding:.7rem .8rem;
  min-height:48px;
}
.champ textarea{ min-height:7rem; resize:vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus{ border-color:var(--steel); }

/* Champ piège anti-spam : invisible pour l'humain, rempli par les robots.
   On le masque sans display:none pour que les robots le voient bien. */
.piege{
  position:absolute !important;
  left:-5000px; width:1px; height:1px; overflow:hidden;
}

.message-retour{
  margin-top:1rem; padding:.9rem 1rem;
  border-radius:8px; font-size:.95rem;
}
.message-succes{ background:var(--green-bg); color:#1E6135; border:1px solid #B7DFC4; }
.message-erreur{ background:var(--red-bg);  color:#8C2A16; border:1px solid #F0C2B6; }
.message-retour[hidden]{ display:none; }

.mention-donnees{
  font-size:.82rem; color:var(--ink-soft); margin-top:1rem;
}

/* ---------- Pied de page ---------- */

.pied{
  background:var(--ink); color:var(--concrete);
  padding:var(--gap-3) 0 var(--gap-2);
  margin-top:var(--gap-3);
}
.pied a{ color:var(--concrete); }
.pied a:hover{ color:var(--white); }
.pied-cols{
  display:grid; gap:var(--gap-2); grid-template-columns:1fr;
}
@media (min-width:700px){
  .pied-cols{ grid-template-columns:2fr 1fr 1fr; }
}
.pied h2, .pied h3{ color:var(--white); font-size:1rem; margin-bottom:.6rem; }
.pied ul{ list-style:none; margin:0; padding:0; font-size:.93rem; }
.pied li{ margin-bottom:.4rem; }
.pied p{ font-size:.93rem; color:#B9BEBC; }
.pied-bas{
  border-top:1px solid #3A423F;
  margin-top:var(--gap-2); padding-top:var(--gap);
  font-size:.85rem; color:#9AA09E;
  display:flex; flex-wrap:wrap; gap:.5rem 1.25rem;
}

/* ---------- Divers ---------- */

.avertissement{
  background:var(--amber);
  color:#3A2A05;
  font-size:.9rem; font-weight:600;
  padding:.7rem 0;
  text-align:center;
}

.texte-long{ max-width:var(--largeur-texte); }
.texte-long h2{ margin-top:var(--gap-3); }
.texte-long h3{ margin-top:var(--gap-2); }
.texte-long ul{ padding-left:1.2rem; }
.texte-long li{ margin-bottom:.5rem; }

.gabarit-vide{
  background:var(--white); border:2px dashed var(--concrete-2);
  border-radius:var(--radius); padding:1.25rem; color:var(--ink-soft);
}