/* ===========================================================================
   THE REBEL OPTICIAN — DESIGN SYSTEM
   static/css/rebel-design-system.css

   Média indépendant de la lunetterie. Charte strictement distincte de
   laplace-design-system.css : aucune variable, aucune police, aucune
   classe partagée. Les deux fichiers ne doivent jamais être chargés
   sur la même page.

   Principes appliqués :
   - alignement à gauche systématique, jamais de texte centré
   - aucun angle arrondi, aucune ombre portée
   - le corail est une ponctuation, jamais une surface
   - répartition 60 ivoire / 30 noir / 10 corail
   - le filet (1px ou 2px) remplace la carte et l'ombre
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. JETONS
   --------------------------------------------------------------------------- */
:root{
  /* couleurs */
  --ivory:#F9F8F6;
  --black:#111111;
  --coral:#FF6B57;
  --coral-dark:#C84D40;     /* corail assombri : seule version lisible en texte sur ivoire */
  --muted:#595754;
  --line:#D2CEC8;
  --surface:#EBE8E3;
  --warm-white:#FFFDFC;
  --coral-wash:#FFF1EE;     /* fond d'alerte, usage rare */

  /* typographie */
  --face:"Manrope","Helvetica Neue",Helvetica,Arial,sans-serif;

  /* rythme — fluide, sans bascule brutale entre écrans */
  --pad:clamp(24px,5vw,48px);      /* 24px mobile -> 48px desktop, en continu */
  --max:1080px;                     /* largeur de grille */
  --measure:68ch;                   /* longueur de ligne du corps de texte */
  --sec:clamp(28px,4.6vw,40px);     /* respiration verticale d'une section */
  --gap:clamp(12px,2.4vw,16px);     /* gouttière des colonnes de formulaire */
}

/* ---------------------------------------------------------------------------
   2. SOCLE
   --------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
}

body{
  margin:0;
  background:var(--ivory);
  overflow-wrap:break-word;        /* EssilorLuxottica, URLs : jamais de débordement */
  -webkit-tap-highlight-color:transparent;
  color:var(--black);
  font-family:var(--face);
  font-size:17px;
  font-weight:400;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

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

:focus-visible{
  outline:2px solid var(--coral-dark);
  outline-offset:3px;
}

::selection{background:var(--coral);color:var(--warm-white);}

/* ---------------------------------------------------------------------------
   3. GRILLE
   --------------------------------------------------------------------------- */
.wrap{
  max-width:var(--max);
  margin:0 auto;
  /* max() protège les zones d'encoche et de coins arrondis (iPhone en paysage) */
  padding-left:max(var(--pad),env(safe-area-inset-left));
  padding-right:max(var(--pad),env(safe-area-inset-right));
}

.col{max-width:680px;}          /* colonne de formulaire ou de lecture resserrée */

.sec{
  /* CORRECTIF : longhands verticaux uniquement. Le raccourci "padding:X 0"
     remettait padding-left/right a 0 et annulait la gouttiere de .wrap
     sur tout element <section class="sec wrap">. */
  padding-top:var(--sec);
  padding-bottom:var(--sec);
  border-bottom:1px solid var(--line);
}
.sec--lg{
  padding-top:calc(var(--sec) * 1.4);
  padding-bottom:calc(var(--sec) * 1.4);
}
.sec--last,.sec:last-of-type{border-bottom:0;}

/* filets structurants */
.topline{border-top:2px solid var(--black);}
.rule{border-top:1px solid var(--black);height:0;}
.rule--light{border-top:1px solid var(--line);height:0;}

/* ---------------------------------------------------------------------------
   4. TYPOGRAPHIE
   --------------------------------------------------------------------------- */

/* Display — réservé à la page d'accueil et aux couvertures de dossier */
.display{
  font-size:clamp(34px,5.6vw,64px);
  font-weight:800;
  letter-spacing:-.035em;
  line-height:1.04;
  margin:0 0 22px;
  max-width:20ch;
}

/* H1 — titre d'action : énonce une conclusion, jamais une accroche */
h1,.h1{
  font-size:clamp(29px,4.6vw,46px);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.08;
  margin:0 0 20px;
  max-width:22ch;
}

h2,.h2{
  font-size:clamp(21px,2.8vw,28px);
  font-weight:700;
  letter-spacing:-.022em;
  line-height:1.22;
  margin:0 0 16px;
  max-width:28ch;
}

h3,.h3{
  font-size:18px;
  font-weight:700;
  letter-spacing:-.01em;
  line-height:1.35;
  margin:20px 0 6px;
}

p{margin:0 0 14px;max-width:var(--measure);}
p:last-child{margin-bottom:0;}

.lede{font-size:19px;line-height:1.55;}
.small{font-size:14px;line-height:1.5;}
.muted{color:var(--muted);}

strong,b{font-weight:700;}

ul,ol{margin:0 0 14px;padding-left:20px;max-width:var(--measure);}
li{margin-bottom:7px;}

a{
  color:var(--black);
  text-decoration:underline;
  text-decoration-color:var(--line);
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
a:hover{text-decoration-color:var(--coral);}

/* numérotation de section — le corail comme ponctuation */
.num{color:var(--coral-dark);margin-right:10px;font-variant-numeric:tabular-nums;}

/* ---------------------------------------------------------------------------
   5. ÉTIQUETTES ET LIGNE DE MOTIF
   --------------------------------------------------------------------------- */

/* eyebrow de section */
.cap{
  font-size:11px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 16px;
}
.cap--black{color:var(--black);}

/* ligne de motif, alignée à droite, en tête de page */
.motif{
  padding:18px 0 14px;
  text-align:right;
  font-size:clamp(9.5px,2.4vw,11px);
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  line-height:1.45;
  text-wrap:balance;               /* coupe proprement au tiret sur petit écran */
}

/* signature typographique */
.sig{padding:34px 0 0;}
.sig a{text-decoration:none;color:inherit;}
.sig p{
  margin:0;
  font-size:15px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  line-height:1.25;
}
.sig .r{color:var(--coral-dark);}

/* ---------------------------------------------------------------------------
   6. COMPOSANTS ÉDITORIAUX
   --------------------------------------------------------------------------- */

/* bloc statistique — chiffre, libellé, source toujours visible */
.stat{margin:30px 0 0;padding-top:26px;border-top:1px solid var(--black);}
.stat .n{
  display:block;
  font-size:clamp(44px,8.4vw,64px);
  font-weight:800;
  letter-spacing:-.04em;
  line-height:1;
  color:var(--coral-dark);
  font-variant-numeric:tabular-nums;
}
.stat .lbl{display:block;margin-top:10px;font-size:17px;font-weight:700;max-width:44ch;}
.stat .src{display:block;margin-top:10px;font-size:12.5px;font-weight:500;color:var(--muted);max-width:62ch;}

/* citation — filet corail 4px, jamais une bulle ni une carte arrondie */
blockquote,.quote{
  margin:0;
  padding:2px 0 2px clamp(14px,3vw,20px);
  border-left:4px solid var(--coral);
  max-width:56ch;
}
blockquote p,.quote p{font-size:19px;font-weight:500;line-height:1.45;margin:0 0 10px;}
blockquote footer,.quote cite{
  display:block;
  font-size:13px;
  font-weight:600;
  font-style:normal;
  color:var(--muted);
}

/* bloc de surface — encadré d'information, sans ombre */
.box{background:var(--surface);padding:26px 28px;}
.box p{max-width:60ch;}
.box--alert{background:var(--coral-wash);border-left:4px solid var(--coral);}

/* liste de méthode : chaque item séparé par un filet */
.steps{margin:0;padding:0;list-style:none;border-top:1px solid var(--line);}
.steps > li{padding:17px 0;border-bottom:1px solid var(--line);margin:0;}
.steps h3{margin-top:0;}
.steps p{font-size:16px;color:var(--muted);margin:0;max-width:62ch;}

/* liste d'énoncés simples */
.plainlist{margin:0;padding:0;list-style:none;}
.plainlist li{
  padding:13px 0;
  border-bottom:1px solid var(--line);
  font-size:16px;
  max-width:64ch;
  margin:0;
}
.plainlist li:first-child{border-top:1px solid var(--line);}

/* tableau de données — envelopper dans <div class="tscroll"> sur les pages à
   tableaux larges (politique de confidentialité, dossiers comparatifs) */
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:6px 0 14px;}
.tscroll table{margin:0;min-width:520px;}
.tscroll::after{content:"";display:block;}

table{width:100%;border-collapse:collapse;margin:6px 0 14px;font-size:15.5px;}
thead th{
  background:var(--black);
  color:var(--ivory);
  text-align:left;
  font-weight:700;
  font-size:13px;
  letter-spacing:.04em;
  padding:10px 12px;
}
tbody td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top;}
tbody tr:nth-child(even) td{background:var(--surface);}

/* ---------------------------------------------------------------------------
   7. FORMULAIRES
   --------------------------------------------------------------------------- */
fieldset{border:0;margin:0 0 28px;padding:0;min-width:0;} /* min-width:0 : neutralise le min-content natif du fieldset */
legend{
  padding:0;
  font-size:11px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:14px;
}

.pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap);} /* minmax(0,…) : une colonne de grille peut desormais passer sous la largeur intrinseque d'un input */
.f{margin-bottom:16px;}

label{display:block;font-size:14px;font-weight:700;margin-bottom:6px;}
label .opt{font-weight:400;color:var(--muted);}

input[type=text],
input[type=email],
input[type=tel],
select,
textarea{
  width:100%;
  font-family:inherit;
  font-size:16px;
  font-weight:400;
  color:var(--black);
  background:var(--warm-white);
  border:1px solid var(--line);
  border-radius:0;
  padding:12px 13px;
  transition:border-color .12s ease;
}
input:hover,select:hover,textarea:hover{border-color:#B3AEA6;}
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--black);
  box-shadow:inset 0 -3px 0 var(--coral);
}

select{
  appearance:none;
  background-image:
    linear-gradient(45deg,transparent 50%,var(--black) 50%),
    linear-gradient(135deg,var(--black) 50%,transparent 50%);
  background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%;
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
  padding-right:38px;
}

/* boutons radio en liste, séparés par un filet */
.radios{border-top:1px solid var(--line);}
.radio{
  display:flex;
  gap:13px;
  align-items:flex-start;
  padding:15px 2px;
  border-bottom:1px solid var(--line);
  cursor:pointer;
  margin:0;
  font-weight:400;
}
.radio input[type=radio]{
  appearance:none;
  flex:0 0 auto;
  width:16px;height:16px;
  margin:4px 0 0;
  border:1px solid #8F8B84;
  border-radius:50%;
  background:var(--warm-white);
  cursor:pointer;
}
.radio input[type=radio]:checked{border:5px solid var(--coral-dark);}
.radio > span{font-size:16px;font-weight:700;line-height:1.35;}
.radio em{
  display:block;
  font-style:normal;
  font-size:14px;
  font-weight:400;
  color:var(--muted);
  margin-top:2px;
}

/* case à cocher de consentement */
.consent{
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin:4px 0 22px;
  cursor:pointer;
  font-weight:400;
}
.consent input[type=checkbox]{
  appearance:none;
  flex:0 0 auto;
  width:16px;height:16px;
  margin:4px 0 0;
  border:1px solid #8F8B84;
  border-radius:0;
  background:var(--warm-white);
  cursor:pointer;
}
.consent input[type=checkbox]:checked{
  background:var(--black);
  border-color:var(--black);
  box-shadow:inset 0 0 0 3px var(--warm-white);
}
.consent > span{font-size:14px;color:var(--muted);max-width:58ch;}

/* message d'erreur */
.err{
  font-size:13.5px;
  font-weight:600;
  color:var(--coral-dark);
  margin:5px 0 0;
  max-width:58ch;
}

/* ---------------------------------------------------------------------------
   8. APPEL À L'ACTION
   Fond noir, texte ivoire. Jamais de bouton surdimensionné de style publicitaire.
   --------------------------------------------------------------------------- */
button,.btn{
  display:inline-block;
  font-family:inherit;
  font-size:16px;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--ivory);
  background:var(--black);
  border:0;
  border-radius:0;
  padding:15px 28px;
  cursor:pointer;
  text-decoration:none;
  transition:background .12s ease;
}
button:hover,.btn:hover{background:var(--coral-dark);}

/* variante discrète : texte corail souligné */
.btn-link{
  background:none;
  color:var(--coral-dark);
  padding:0;
  font-weight:700;
  text-decoration:underline;
  text-decoration-color:var(--coral);
  text-underline-offset:4px;
}
.btn-link:hover{background:none;color:var(--black);}

.after{font-size:13.5px;color:var(--muted);margin-top:14px;max-width:58ch;}

/* ---------------------------------------------------------------------------
   9. CONFIRMATION
   --------------------------------------------------------------------------- */
.bar{width:56px;border-top:4px solid var(--coral);margin-bottom:18px;}

/* ---------------------------------------------------------------------------
   10. PIED DE PAGE — bloc de transparence
   --------------------------------------------------------------------------- */
.foot{
  border-top:2px solid var(--black);
  /* CORRECTIF : meme bug que .sec — le raccourci annulait la gouttiere. */
  padding-top:26px;
  padding-bottom:52px;
}
.foot p{font-size:12.5px;font-weight:500;color:var(--muted);max-width:70ch;margin:0 0 6px;}
.foot nav{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px 24px;}
.foot nav a{
  font-size:12px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--black);
  border-bottom:1px solid var(--line);
  padding-bottom:2px;
}
.foot nav a:hover{border-bottom-color:var(--coral);}

/* ---------------------------------------------------------------------------
   11. UTILITAIRES
   --------------------------------------------------------------------------- */
.hidden{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.mt-0{margin-top:0;}
.mt-s{margin-top:10px;}
.mt-m{margin-top:20px;}
.mt-l{margin-top:34px;}

/* ---------------------------------------------------------------------------
   12. RESPONSIVE

   Les marges et le rythme sont déjà fluides via clamp() : ces paliers ne
   servent qu'aux réagencements que clamp() ne peut pas faire.
   --------------------------------------------------------------------------- */

/* --- tablette et en dessous : réduire la longueur de ligne --- */
@media (max-width:900px){
  :root{--measure:62ch;}
  h1,.h1{max-width:24ch;}
  h2,.h2{max-width:30ch;}
}

/* --- mobile : une seule colonne, zones tactiles agrandies --- */
@media (max-width:640px){
  body{font-size:16.5px;line-height:1.6;}

  .pair{grid-template-columns:1fr;gap:0;}
  .col{max-width:none;}

  .lede{font-size:18px;}
  h3,.h3{margin-top:18px;}

  /* respiration interne des encadrés, proportionnée à la marge de page */
  .box{padding:clamp(18px,4.5vw,26px) clamp(16px,4vw,28px);}

  /* zones tactiles : 48px minimum sur les lignes cliquables */
  .radio{padding:16px 2px;}
  .radio input[type=radio]{width:18px;height:18px;margin-top:3px;}
  .consent input[type=checkbox]{width:18px;height:18px;margin-top:3px;}
  button,.btn{padding:16px 26px;width:100%;text-align:center;}

  /* tableaux nus : défilement horizontal plutôt que débordement */
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  thead th,tbody td{padding:9px 10px;}

  /* le bloc statistique ne doit pas écraser la marge */
  .stat .n{font-size:clamp(38px,11vw,52px);}
  .stat{margin-top:24px;padding-top:22px;}

  /* pied de page : liens en colonne, cibles séparées */
  .foot nav{gap:12px 20px;}
  .foot nav a{padding-bottom:4px;}
}

/* --- très petits écrans (360px et moins) --- */
@media (max-width:380px){
  :root{--pad:20px;}
  h1,.h1{letter-spacing:-.025em;}
  .sig p{font-size:14px;letter-spacing:.12em;}
}

/* --- paysage bas de plafond : réduire le vertical, pas l'horizontal --- */
@media (max-height:520px) and (orientation:landscape){
  :root{--sec:22px;}
  .sig{padding-top:20px;}
}

/* ---------------------------------------------------------------------------
   13. IMPRESSION — les dossiers sont imprimés et annotés
   --------------------------------------------------------------------------- */
@media print{
  body{background:#fff;font-size:11pt;}
  .motif,.foot nav,button,.btn,form{display:none;}
  .sec{page-break-inside:avoid;}
  a{text-decoration:none;}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555;}
}