/* Composants repris de agence-meta-ads (duo, prose-liste, jours, note) :
   même rendu. */
/* ---------- les trois conditions, puis les trois limites ----------
   Même composant que la cartographie : trois faces sur le bandeau graphite.
   Ici deux sections l'emploient, l'une avec titre de face, l'autre sans. */
.duo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--deep-line);border:1px solid var(--deep-line)}
.duo--trois{grid-template-columns:repeat(3,minmax(0,1fr))}
.face{background:var(--deep);padding:clamp(24px,3vw,34px)}
.face .k{font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent-2);font-weight:700}
.face strong{display:block;margin:12px 0 14px;font-size:clamp(18px,2.1vw,22px);
  font-weight:700;letter-spacing:-.026em;line-height:1.18}
.face .quoi{font-size:14.5px;color:var(--deep-mut);line-height:1.66}
.face .quoi b{color:var(--on-deep)}
/* sur graphite, le vert d'accent du corps de texte n'a pas assez de contraste :
   c'est l'accent clair qui sert de couleur de lien, ici et dans le paragraphe
   de bascule. */
.face .quoi a,.apres a{color:var(--accent-2);text-decoration:underline;
  text-underline-offset:2px}

.apres{margin-top:clamp(24px,3vw,34px);font-size:clamp(15.5px,1.5vw,17px);
  color:var(--deep-mut);max-width:74ch;line-height:1.66}
.apres b{color:var(--on-deep)}

/* ---------- ce que contient la gestion ---------- */
.prose-liste{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:11px}
.prose-liste li{position:relative;padding-left:19px;
  font-size:15px;color:var(--muted);line-height:1.6}
.prose-liste li::before{content:"";position:absolute;left:0;top:9px;
  width:6px;height:6px;background:var(--accent)}
.prose-liste li b{color:var(--ink);font-weight:700}
/* deux colonnes, pas trois : les entrées commencent par un intitulé en gras
   suivi d'une phrase entière, et à trois colonnes chaque ligne ne tient plus
   que quatre ou cinq mots. */
.prose-liste--deux{grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px clamp(24px,4vw,56px)}
@media (max-width:760px){
  .prose-liste--deux{grid-template-columns:minmax(0,1fr)}
}

/* ---------- les quatre premières semaines ---------- */
.jours{margin:0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.jours .j{background:var(--surface);padding:18px 22px;
  display:grid;grid-template-columns:minmax(0,92px) minmax(0,1fr);gap:22px;align-items:start}
.jours .d{font-family:var(--mono);font-size:11.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--accent-txt);padding-top:3px}
.jours div{font-size:14.5px;color:var(--muted);line-height:1.66}
.jours b{color:var(--ink);font-weight:700}

.offres-note{margin-top:clamp(20px,2.4vw,28px);font-size:14px;color:var(--muted);
  line-height:1.65;max-width:74ch}
.offres-note b{color:var(--ink);font-weight:700}


/* ---------- les formats : un petit écran dessiné pour chaque emplacement ---------- */
.hero--page .lede a{text-decoration:underline;text-underline-offset:3px}
.formats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin-bottom:clamp(24px,3vw,36px)}
.format{background:var(--surface);padding:clamp(22px,2.6vw,30px);min-width:0;
  display:grid;grid-template-columns:74px minmax(0,1fr);gap:20px;align-items:start}
.format .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent-txt);font-weight:700}
.format h3{margin:8px 0 10px;font-size:18px;font-weight:700;letter-spacing:-.02em;line-height:1.24}
.format p{font-size:14px;color:var(--muted);line-height:1.6;margin:0}
.ecran{position:relative;width:74px;background:var(--deep);color:var(--on-deep);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  font-family:var(--mono);font-size:12px;font-weight:700}
.ecran--916{aspect-ratio:9/16}
.ecran--45{aspect-ratio:4/5}
.zone{position:absolute;left:0;right:0;background:var(--deep-mut);opacity:.34}
.zone--haut{top:0;height:14%}
.zone--reel{bottom:0;height:35%}
.zone--story{bottom:0;height:20%}

/* ---------- booster ou campagne ---------- */
.compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.8vw,20px)}
.cote{background:var(--bg,#fff);border:1px solid var(--line);padding:clamp(22px,2.8vw,32px);min-width:0}
.cote .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-txt);font-weight:700}
.cote h3{margin:10px 0 18px;font-size:clamp(19px,2.1vw,23px);font-weight:700;
  letter-spacing:-.024em;line-height:1.2}
.cote ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.cote li{position:relative;padding-left:19px;font-size:14.5px;color:var(--muted);line-height:1.56}
.cote li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;background:var(--line)}
.cote--phare{background:var(--deep);border-color:var(--deep)}
.cote--phare .k{color:var(--accent-2)}
.cote--phare h3{color:var(--on-deep)}
.cote--phare li{color:var(--deep-mut)}
.cote--phare li b{color:var(--on-deep)}
.cote--phare li::before{background:var(--accent-2)}
.cote--phare a{color:var(--accent-2);text-decoration:underline;text-underline-offset:2px}

/* ---------- le profil ---------- */
.profil{align-items:start}
.profil .apres{margin-top:20px}
.liste-profil{list-style:none;margin:0;padding:0;display:grid;gap:1px;
  background:var(--deep-line);border:1px solid var(--deep-line)}
.liste-profil li{background:var(--deep);padding:16px 20px;font-size:14.5px;
  color:var(--deep-mut);line-height:1.6}
.liste-profil b{display:block;color:var(--on-deep);font-weight:700;margin-bottom:3px}
.prose-liste li a{text-decoration:underline;text-underline-offset:2px}

@media (max-width:1020px){
  .formats{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .compare{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:1020px){
  .duo,.duo--trois{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .jours .j{grid-template-columns:minmax(0,1fr);gap:8px}
}