/* coudremieux : feuille de style unique du site (style 1 « tapis de coupe », choisi le 14/10/2026).
   Polices copiées dans /fonts (licence OFL, sources dans contexte.md). Couples : T4 (diversite-catalogue.md). */

@font-face{font-family:"Schibsted Grotesk";src:url("../fonts/SchibstedGrotesk-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Schibsted Grotesk";src:url("../fonts/SchibstedGrotesk-ExtraBold.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/Inter-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/Inter-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  --tapis:#24574A;        /* vert du tapis de coupe */
  --tapis-fonce:#1A4237;  /* en-tête, survol des boutons */
  --moutarde:#E2B33C;     /* graduations, repères, focus */
  --fond:#F3F5F2;
  --blanc:#FFFFFF;
  --encre:#1C2B27;
  --gris:#4F5E59;
  --trait:#C9D3CE;
  --surligne:#FBF3DC;     /* ligne du meilleur choix */
  --titres:"Schibsted Grotesk",system-ui,sans-serif;
  --texte:"Inter",system-ui,sans-serif;
  --large:1080px;
  --lecture:720px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fond);color:var(--encre);font:400 18px/1.65 var(--texte)}
img,svg{max-width:100%;height:auto}
a{color:var(--tapis);text-underline-offset:2px}
a:hover{color:var(--tapis-fonce)}
:focus-visible{outline:3px solid var(--encre);outline-offset:2px}
.entete :focus-visible,.tapis :focus-visible,.pied :focus-visible{outline-color:var(--moutarde)}
.aller{position:absolute;left:-9999px;top:0;background:var(--encre);color:#fff;padding:10px 14px;z-index:10}
.aller:focus{left:8px;top:8px}

/* ---------- En-tête et menu par silo ---------- */
.entete{background:var(--tapis-fonce);color:#fff;position:relative;z-index:5}
.entete-in{max-width:var(--large);margin:0 auto;padding:12px 16px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px}
.logo{font:800 23px/1 var(--titres);color:#fff;text-decoration:none;margin-right:auto;letter-spacing:-.01em}
.logo span{color:var(--moutarde)}
.logo:hover{color:#fff}
.menu{display:flex;flex-wrap:wrap;gap:4px 18px}
.silo{position:relative}
.silo summary{list-style:none;cursor:pointer;color:#E4ECE8;font-size:16px;font-weight:600;padding:8px 0;display:flex;align-items:center;gap:8px}
.silo summary::-webkit-details-marker{display:none}
.silo summary::after{content:"";width:7px;height:7px;border-right:2px solid var(--moutarde);border-bottom:2px solid var(--moutarde);transform:rotate(45deg) translateY(-2px)}
.silo[open] summary::after{transform:rotate(-135deg) translateY(-1px)}
.silo summary:hover{color:#fff}
.silo ul{list-style:none;margin:0;padding:8px 0;background:var(--blanc);border-top:4px solid var(--moutarde);box-shadow:0 10px 24px rgba(26,66,55,.18);position:absolute;right:0;top:100%;min-width:290px}
.silo li a{display:block;padding:9px 18px;color:var(--encre);text-decoration:none;font-size:16px}
.silo li a:hover{background:var(--fond);color:var(--tapis)}
.silo li.mere a{font-weight:600;border-bottom:1px solid var(--trait);margin-bottom:4px}

/* ---------- Haut de page : le tapis de coupe ---------- */
.tapis{position:relative;color:#fff;background:
  linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px) 0 0/38px 38px,
  linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px) 0 0/38px 38px,
  linear-gradient(rgba(226,179,60,.32) 1px,transparent 1px) 0 0/190px 190px,
  linear-gradient(90deg,rgba(226,179,60,.32) 1px,transparent 1px) 0 0/190px 190px,
  var(--tapis)}
.tapis-in{max-width:var(--large);margin:0 auto;padding:30px 16px 70px}
.ariane ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:2px 0;font-size:15px;color:#E1EBE6}
.ariane li+li::before{content:">";margin:0 8px;color:var(--moutarde)}
.ariane a{color:#fff}
.tapis h1{font:800 clamp(32px,6vw,58px)/1.04 var(--titres);letter-spacing:-.02em;max-width:17ch;margin:16px 0 14px}
.maj{margin:0;font-size:15px;color:#E1EBE6}
.regle{position:absolute;left:0;right:0;bottom:0;height:24px;background:
  repeating-linear-gradient(90deg,var(--moutarde) 0 2px,transparent 2px 38px) bottom/100% 20px no-repeat,
  repeating-linear-gradient(90deg,var(--moutarde) 0 1px,transparent 1px 7.6px) bottom/100% 8px no-repeat}

/* ---------- Corps ---------- */
.page{max-width:var(--large);margin:0 auto;padding:0 16px 56px}
.lecture{max-width:var(--lecture)}
.reponse{background:var(--blanc);border-left:6px solid var(--moutarde);margin-top:-34px;position:relative;padding:22px 24px;max-width:var(--lecture);box-shadow:0 2px 0 var(--trait)}
.reponse h2{font:800 21px/1.2 var(--titres);margin:0 0 6px}
.reponse p{margin:0 0 14px}

.sommaire{margin:34px 0 0}
.sommaire h2{font:700 17px/1.3 var(--titres);margin:0 0 10px}
.sommaire ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.sommaire a{display:block;border:1px solid var(--trait);background:var(--blanc);padding:7px 13px;border-radius:3px;text-decoration:none;font-size:16px;color:var(--encre)}
.sommaire a:hover{border-color:var(--tapis);color:var(--tapis)}

.lecture h2,.bloc-titre{font:800 clamp(25px,3.4vw,30px)/1.15 var(--titres);letter-spacing:-.01em;margin:52px 0 14px;scroll-margin-top:16px}
.lecture h3{font:700 21px/1.25 var(--titres);margin:30px 0 8px}
.lecture p,.lecture ul,.lecture ol{margin:0 0 16px}
.lecture li{margin-bottom:6px}

.btn{display:inline-block;background:var(--tapis);color:#fff;font:600 17px/1.2 var(--texte);text-decoration:none;padding:13px 20px;border-radius:3px}
.btn:hover{background:var(--tapis-fonce);color:#fff}

/* ---------- Tableau comparatif : tableau sur grand écran, cartes sur téléphone ---------- */
.comparatif{width:100%;border-collapse:collapse;background:var(--blanc);border:1px solid var(--trait);font-size:16px;font-variant-numeric:lining-nums tabular-nums}
.legende{font-size:15px;color:var(--gris);margin:0 0 8px}
.comparatif th,.comparatif td{text-align:left;vertical-align:top;padding:12px 14px;border-bottom:1px solid var(--trait)}
.comparatif thead th{background:var(--tapis);color:#fff;font-weight:600}
.comparatif tbody th{font-weight:600;min-width:7.5em}
.comparatif tr.choix>*{background:var(--surligne)}
.comparatif .marque-choix{display:block;font-size:14px;font-weight:600;color:var(--tapis)}

@media (max-width:640px){
  .comparatif,.comparatif tbody,.comparatif tr,.comparatif th,.comparatif td{display:block;width:100%}
  .comparatif{border:0;background:none}
  .comparatif thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .comparatif tbody tr{background:var(--blanc);border:1px solid var(--trait);margin:0 0 12px;padding:0 0 6px}
  .comparatif tr.choix{border:2px solid var(--moutarde)}
  .comparatif tbody th{font:700 19px/1.3 var(--titres);border-bottom:1px solid var(--trait);padding:12px 16px}
  .comparatif td{border:0;padding:8px 16px;display:grid;grid-template-columns:7.5em 1fr;gap:10px}
  .comparatif td::before{content:attr(data-label);font-weight:600;color:var(--gris);font-size:15px}
}

/* ---------- Encadré produit : une pièce découpée ---------- */
.produit{background:var(--blanc);border:2px dashed #7D8C87;padding:22px;margin:20px 0;position:relative}
.produit::before{content:"";position:absolute;top:-2px;left:22px;width:14px;height:10px;background:var(--fond);border:2px solid #7D8C87;border-top:0;clip-path:polygon(0 0,100% 0,50% 100%)}
.produit .etiquette{display:inline-block;background:var(--moutarde);color:var(--encre);font-size:14px;font-weight:600;padding:3px 9px;margin:0 0 10px}
.lecture .produit h3{font:800 23px/1.2 var(--titres);margin:0 0 4px}
.produit .pourqui{color:var(--gris);margin:0 0 14px}
.produit .avis{display:grid;grid-template-columns:3fr 2fr;gap:12px 22px;margin:0 0 18px}
.produit .avis h4{margin:0;font:700 16px/1.3 var(--texte);color:var(--tapis)}
.produit .avis ul{margin:4px 0 0;padding-left:18px}
.produit .avis .defaut h4{color:#8A4B12}
@media (max-width:560px){.produit{padding:18px}.produit .avis{grid-template-columns:1fr}.produit .btn{display:block;text-align:center}}

/* ---------- Questions fréquentes ---------- */
.faq h3{border-top:1px dashed #7D8C87;padding-top:18px}

/* ---------- Conclusion ---------- */
.conclusion{background:var(--blanc);border-top:4px solid var(--tapis);padding:20px 24px;margin-top:52px}
.lecture .conclusion h2{margin-top:0}

/* ---------- À lire aussi ---------- */
.aussi{margin-top:52px;border-top:3px solid var(--encre);padding-top:14px}
.aussi h2{font:800 23px/1.2 var(--titres);margin:0 0 6px}
.aussi ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0 24px}
.aussi a{display:block;font-weight:600;padding:13px 0;border-bottom:1px solid var(--trait);text-decoration:none}
.aussi a:hover{text-decoration:underline}

/* ---------- Plan du site ---------- */
.plan h2{font:800 28px/1.15 var(--titres);margin:44px 0 6px}
.plan h3{font:700 20px/1.3 var(--titres);margin:24px 0 6px}
.plan ul{margin:0;padding-left:20px}
.plan li{margin:5px 0}
.plan .mere>a{font-weight:600}

/* ---------- Pied de page ---------- */
.pied{background:var(--encre);color:#DCE3E0;font-size:16px;margin-top:24px}
.pied-in{max-width:var(--large);margin:0 auto;padding:26px 16px 32px}
.pied .affiliation{margin:0 0 14px;color:#fff;font-size:16px;max-width:60ch}
.pied ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 22px}
.pied a{color:#DCE3E0}
.pied a:hover{color:#fff}

@media (max-width:640px){
  body{font-size:17px}
  .entete-in{padding:10px 16px}
  .menu{width:100%;gap:0 18px}
  .silo{position:static}
  .silo ul{left:0;right:0;min-width:0}
  .tapis-in{padding:22px 16px 60px}
  .reponse{padding:18px;margin-top:-30px}
  .reponse .btn{display:block;text-align:center}
}
/* Petits téléphones (iPhone SE) : menu sur une ligne et haut de page resserré, pour voir le bouton Amazon sans défiler */
@media (max-width:400px){
  .silo .long{display:none}
  .tapis-in{padding:16px 16px 48px}
  .tapis h1{font-size:28px;margin:12px 0 10px}
  .reponse{padding:16px;margin-top:-28px}
  .reponse h2{font-size:19px}
  .reponse p{margin-bottom:12px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* ---------- Accueil : les deux silos, comme deux pièces de patron ---------- */
.tapis .chapeau{margin:0;font-size:19px;color:#E1EBE6;max-width:40ch}
.accueil{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:-34px;position:relative}
.piece-silo{background:var(--blanc);border:2px dashed #7D8C87;padding:26px 26px 28px;position:relative}
.piece-silo::before{content:"";position:absolute;top:-2px;left:26px;width:14px;height:10px;background:var(--tapis);border:2px solid #7D8C87;border-top:0;clip-path:polygon(0 0,100% 0,50% 100%)}
.piece-silo h2{font:800 clamp(24px,3vw,30px)/1.15 var(--titres);margin:0 0 8px;letter-spacing:-.01em}
.piece-silo h2 a{color:var(--encre);text-decoration:none}
.piece-silo h2 a:hover{color:var(--tapis);text-decoration:underline}
.piece-silo p{margin:0 0 14px;color:var(--gris)}
.piece-silo ul{list-style:none;margin:0 0 22px;padding:0;border-top:1px solid var(--trait)}
.piece-silo li a{display:block;padding:11px 0;border-bottom:1px solid var(--trait);font-weight:600;text-decoration:none}
.piece-silo li a:hover{text-decoration:underline}
@media (max-width:760px){.accueil{grid-template-columns:minmax(0,1fr);margin-top:-30px}.piece-silo+.piece-silo::before{background:var(--fond)}.piece-silo{padding:20px}.piece-silo .btn{display:block;text-align:center}}

/* ---------- Pages fixes (légales, contact, à propos, 404) ---------- */
.texte-legal{padding-top:36px}
.texte-legal h2{font:800 24px/1.2 var(--titres);margin:36px 0 10px}
.texte-legal .maj-legal{color:var(--gris);font-size:15px;margin:0}
.plan{padding-top:12px}
.reponse .detail{margin:12px 0 0;font-size:16px}
.reponse .apres{margin:14px 0 0;font-size:16px;line-height:1.5;color:var(--gris)}