/* ==========================================================================
   Captivo — site.css
   Base, typographie, composants partagés.
   Dépend de tokens.css, chargé avant.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Base
   -------------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

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

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--sans);
  font-size: var(--t-15);
  line-height: var(--interligne);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* --------------------------------------------------------------------------
   2. Focus — corail, visible partout, jamais supprimé
   -------------------------------------------------------------------------- */

:focus-visible {
  outline: var(--focus);
  outline-offset: var(--focus-decalage);
  border-radius: 1px;
}
/* Sur un aplat corail, le corail seul ne se verrait pas : on ajoute un
   liseré sombre entre le bouton et le contour. */
.btn--plein:focus-visible {
  outline-color: var(--corail);
  box-shadow: 0 0 0 2px var(--fond);
}

/* Lien d'évitement */
.evitement {
  position: absolute; left: -9999px;
  background: var(--corail); color: var(--sur-corail);
  padding: var(--e-3) var(--e-4);
  font-weight: 600; z-index: 100;
}
.evitement:focus { left: var(--e-4); top: var(--e-4); }

/* --------------------------------------------------------------------------
   3. Typographie
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--creme);
  font-weight: 700;
  line-height: var(--interligne-titre);
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: var(--t-38); line-height: var(--interligne-serre); letter-spacing: -.005em; }
h2 { font-size: var(--t-24); }
h3 { font-size: var(--t-20); }
h4 { font-size: var(--t-17); font-family: var(--sans); font-weight: 600; color: var(--texte); }

@media (min-width: 760px) {
  h1 { font-size: var(--t-52); }
  h2 { font-size: var(--t-30); }
}

p { margin: 0 0 var(--e-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--texte); text-decoration-color: var(--faible); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--corail); }

strong { font-weight: 600; color: var(--creme); }

/* Surtitre mono — sert de repère de section, jamais de badge décoratif */
.surtitre {
  font-family: var(--mono);
  font-size: var(--t-11);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--sourdine);
  margin: 0 0 var(--e-5);
}

/* Chapô */
.chapo {
  font-size: var(--t-17);
  color: var(--texte);
  max-width: var(--largeur-texte);
}

.mesure { max-width: var(--largeur-texte); }

/* Valeur technique dans un paragraphe : « EOS 250D », « 8 s », « 300 dpi » */
.tech {
  font-family: var(--mono);
  font-size: .92em;
  color: var(--creme);
  font-variant-numeric: tabular-nums;
}

.sourdine { color: var(--sourdine); }

/* Listes de prose */
.liste { margin: 0 0 var(--e-4); padding-left: var(--e-5); }
.liste li { margin-bottom: var(--e-2); }
.liste li::marker { color: var(--corail); }

/* --------------------------------------------------------------------------
   4. Mise en page
   -------------------------------------------------------------------------- */

.conteneur {
  max-width: var(--largeur);
  margin: 0 auto;
  padding-left: var(--e-5);
  padding-right: var(--e-5);
}
@media (min-width: 760px) {
  .conteneur { padding-left: var(--e-8); padding-right: var(--e-8); }
}

.section { padding-block: var(--e-16); }
.section--dense { padding-block: var(--e-12); }
.section--ample { padding-block: var(--e-20); }
.section--profonde { background: var(--fond-profond); }
.section--surface { background: var(--surface); }
.section--filet-haut { border-top: var(--trait); }

@media (min-width: 760px) {
  .section { padding-block: var(--e-20); }
  .section--ample { padding-block: var(--e-24); }
}

.entete-section { margin-bottom: var(--e-10); }
.entete-section p { color: var(--sourdine); max-width: var(--largeur-texte); margin-top: var(--e-3); }

/* --------------------------------------------------------------------------
   5. Boutons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  font-family: var(--sans);
  font-size: var(--t-15);
  font-weight: 600;
  line-height: 1;
  padding: var(--e-3) var(--e-5);
  min-height: 42px;
  border-radius: var(--rayon);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.btn--plein {
  background: var(--corail);
  color: var(--sur-corail);
  border-color: var(--corail);
}
.btn--plein:hover { background: var(--corail-presse); border-color: var(--corail-presse); }

.btn--secondaire {
  background: transparent;
  color: var(--texte);
  border-color: var(--filet);
}
.btn--secondaire:hover { border-color: var(--sourdine); background: var(--surface); }

.btn--discret {
  background: transparent;
  color: var(--sourdine);
  padding-inline: var(--e-2);
  min-height: 36px;
}
.btn--discret:hover { color: var(--corail); }

.btn--large { min-height: 48px; padding-inline: var(--e-8); font-size: var(--t-17); }

.btn[aria-disabled="true"], .btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}

.groupe-btn { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; }

/* --------------------------------------------------------------------------
   6. Cartes
   -------------------------------------------------------------------------- */

.carte {
  background: var(--surface);
  border: var(--trait);
  border-radius: var(--rayon);
  padding: var(--e-6);
}
.carte h3, .carte h4 { margin-bottom: var(--e-3); }
.carte p { color: var(--sourdine); }
.carte p:last-child { margin-bottom: 0; }

.carte--accent { border-left: 2px solid var(--corail); }
.carte--haute { background: var(--surface-haute); }

/* Carte cliquable : le survol change le filet, pas l'ombre */
a.carte { display: block; text-decoration: none; transition: border-color var(--transition); }
a.carte:hover { border-color: var(--sourdine); }
a.carte:hover h3 { color: var(--corail); }

/* --------------------------------------------------------------------------
   7. Tableaux
   -------------------------------------------------------------------------- */

.tableau-defilant {
  overflow-x: auto;
  border: var(--trait);
  border-radius: var(--rayon);
  -webkit-overflow-scrolling: touch;
}

.tableau {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-13);
  min-width: 620px;
}
.tableau caption {
  text-align: left;
  padding: var(--e-4) var(--e-5);
  color: var(--sourdine);
  font-size: var(--t-12);
  border-bottom: var(--trait);
  background: var(--surface);
}
.tableau th, .tableau td {
  text-align: left;
  padding: var(--e-3) var(--e-5);
  border-bottom: var(--trait);
  vertical-align: top;
}
.tableau thead th {
  background: var(--surface);
  color: var(--creme);
  font-weight: 600;
  font-size: var(--t-12);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}
.tableau tbody tr:last-child td, .tableau tbody tr:last-child th { border-bottom: 0; }
.tableau tbody tr:hover td, .tableau tbody tr:hover th { background: var(--surface); }
.tableau tbody th { font-weight: 500; color: var(--texte); }
.tableau .col-tech { font-family: var(--mono); color: var(--creme); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tableau .cellule-note { color: var(--sourdine); }

/* Groupe de lignes : « Boîtiers Canon », « Imprimantes DNP »… */
.tableau .rubrique th {
  background: var(--fond-profond);
  font-family: var(--mono);
  font-size: var(--t-11);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--sourdine);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   8. Badges — porteurs de sens, jamais décoratifs
   -------------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-family: var(--mono);
  font-size: var(--t-11);
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px var(--e-2);
  border-radius: 2px;
  border: 1px solid;
  white-space: nowrap;
}
.badge::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.badge--teste        { color: var(--succes);  border-color: rgba(74,222,128,.35);  background: var(--succes-fond); }
.badge--non-teste    { color: var(--alerte);  border-color: rgba(250,204,21,.35);  background: var(--alerte-fond); }
.badge--non-supporte { color: var(--erreur);  border-color: rgba(248,113,113,.35); background: var(--erreur-fond); }
.badge--neutre       { color: var(--sourdine); border-color: var(--filet); background: transparent; }

/* Légende des badges, à placer sous un tableau de compatibilité */
.legende-badges {
  display: flex; flex-wrap: wrap; gap: var(--e-3) var(--e-6);
  margin-top: var(--e-4);
  font-size: var(--t-12);
  color: var(--sourdine);
}
.legende-badges > * { display: flex; align-items: center; gap: var(--e-2); }

/* --------------------------------------------------------------------------
   9. Encadrés sémantiques
   -------------------------------------------------------------------------- */

.encadre {
  border: 1px solid var(--filet);
  border-left-width: 2px;
  border-radius: var(--rayon);
  padding: var(--e-4) var(--e-5);
  font-size: var(--t-13);
  color: var(--texte);
}
.encadre > :last-child { margin-bottom: 0; }
.encadre p { color: inherit; }
.encadre-titre {
  font-family: var(--mono);
  font-size: var(--t-11);
  text-transform: uppercase;
  letter-spacing: .12em;
  margin: 0 0 var(--e-2);
  font-weight: 500;
}

.encadre--succes { border-left-color: var(--succes); background: var(--succes-fond); }
.encadre--succes .encadre-titre { color: var(--succes); }
.encadre--alerte { border-left-color: var(--alerte); background: var(--alerte-fond); }
.encadre--alerte .encadre-titre { color: var(--alerte); }
.encadre--erreur { border-left-color: var(--erreur); background: var(--erreur-fond); }
.encadre--erreur .encadre-titre { color: var(--erreur); }
.encadre--note   { border-left-color: var(--corail); background: var(--corail-fond); }
.encadre--note .encadre-titre { color: var(--corail); }

/* Placeholder d'image : dit ce que la capture montrera, avec son nom de
   fichier. Aucune image d'illustration générique sur ce site. */
.visuel-attendu {
  border: 1px dashed var(--filet);
  border-radius: var(--rayon);
  background: var(--fond-profond);
  padding: var(--e-8) var(--e-5);
  text-align: center;
  color: var(--sourdine);
  font-size: var(--t-13);
}
.visuel-attendu code {
  display: block;
  margin-top: var(--e-2);
  font-family: var(--mono);
  font-size: var(--t-12);
  color: var(--faible);
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   10. Blocs de code et valeurs techniques
   -------------------------------------------------------------------------- */

code {
  font-family: var(--mono);
  font-size: .92em;
  color: var(--creme);
  background: var(--surface-haute);
  border: 1px solid var(--filet);
  border-radius: 2px;
  padding: 1px 5px;
  overflow-wrap: anywhere;
}

pre {
  margin: 0;
  background: var(--fond-profond);
  border: var(--trait);
  border-radius: var(--rayon);
  padding: var(--e-4) var(--e-5);
  overflow-x: auto;
  font-size: var(--t-13);
  line-height: 1.7;
}
pre code {
  background: none; border: 0; padding: 0;
  color: var(--texte);
  font-size: inherit;
}
pre .cmt { color: var(--faible); }
pre .val { color: var(--corail); }

/* Liste de spécifications — deux colonnes, filet entre chaque ligne */
.specs { border: var(--trait); border-radius: var(--rayon); margin: 0; overflow: hidden; }
.specs > div {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--e-5);
  padding: var(--e-3) var(--e-5);
  border-bottom: var(--trait);
  align-items: baseline;
}
.specs > div:last-child { border-bottom: 0; }
.specs dt { color: var(--sourdine); font-size: var(--t-13); }
.specs dd { margin: 0; font-family: var(--mono); font-size: var(--t-13); color: var(--creme); }
@media (max-width: 560px) {
  .specs > div { grid-template-columns: 1fr; gap: var(--e-1); }
}

/* --------------------------------------------------------------------------
   11. Accordéon
   -------------------------------------------------------------------------- */

.accordeon { border: var(--trait); border-radius: var(--rayon); overflow: hidden; }
.accordeon > * + * { border-top: var(--trait); }

.accordeon-tete {
  margin: 0;
}
.accordeon-bouton {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 0;
  color: var(--creme);
  font-family: var(--sans);
  font-size: var(--t-15);
  font-weight: 500;
  line-height: 1.45;
  padding: var(--e-4) var(--e-5);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.accordeon-bouton:hover { background: var(--surface-haute); color: var(--corail); }
.accordeon-bouton:focus-visible { outline-offset: -2px; }

/* Chevron dessiné au trait, dans l'esprit du monogramme : pas de
   bibliothèque d'icônes. */
.accordeon-chevron { flex: none; transition: transform var(--transition); }
.accordeon-chevron path { stroke: var(--sourdine); stroke-width: 1.5; fill: none; }
.accordeon-bouton[aria-expanded="true"] .accordeon-chevron { transform: rotate(90deg); }
.accordeon-bouton[aria-expanded="true"] .accordeon-chevron path { stroke: var(--corail); }

.accordeon-panneau {
  padding: 0 var(--e-5) var(--e-5);
  background: var(--surface);
  color: var(--sourdine);
  font-size: var(--t-13);
}
.accordeon-panneau > :last-child { margin-bottom: 0; }
.accordeon-panneau[hidden] { display: none; }

/* --------------------------------------------------------------------------
   12. Fil d'Ariane
   -------------------------------------------------------------------------- */

.fil { padding-block: var(--e-4); font-size: var(--t-12); }
.fil ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2);
}
.fil li { display: flex; align-items: center; gap: var(--e-2); color: var(--sourdine); }
.fil li + li::before {
  content: "/";
  color: var(--faible);
  font-family: var(--mono);
}
.fil a { color: var(--sourdine); text-decoration: none; }
.fil a:hover { color: var(--corail); text-decoration: underline; text-underline-offset: 3px; }
.fil [aria-current="page"] { color: var(--texte); }

/* --------------------------------------------------------------------------
   13. Champs de formulaire
   -------------------------------------------------------------------------- */

.champ { margin-bottom: var(--e-5); }
.champ label {
  display: block;
  font-size: var(--t-13);
  font-weight: 500;
  color: var(--texte);
  margin-bottom: var(--e-2);
}
.champ .aide { display: block; font-size: var(--t-12); color: var(--sourdine); font-weight: 400; margin-top: 2px; }

.champ input[type="text"],
.champ input[type="email"],
.champ input[type="tel"],
.champ select,
.champ textarea {
  width: 100%;
  background: var(--surface-haute);
  border: var(--trait);
  border-radius: var(--rayon);
  color: var(--texte);
  font-family: var(--sans);
  font-size: var(--t-15);
  padding: var(--e-3) var(--e-4);
  min-height: 44px;
}
.champ textarea { min-height: 132px; resize: vertical; line-height: var(--interligne); }
.champ input:focus-visible, .champ select:focus-visible, .champ textarea:focus-visible {
  outline: var(--focus);
  outline-offset: 0;
  border-color: var(--corail);
}
.champ input::placeholder, .champ textarea::placeholder { color: var(--faible); }

.champ--erreur input, .champ--erreur select, .champ--erreur textarea { border-color: var(--erreur); }
.message-erreur {
  display: flex; gap: var(--e-2);
  margin-top: var(--e-2);
  font-size: var(--t-12);
  color: var(--erreur);
}
.message-erreur[hidden] { display: none; }

/* Case à cocher — consentement RGPD */
.case { display: flex; gap: var(--e-3); align-items: flex-start; }
.case input[type="checkbox"] {
  flex: none;
  width: 18px; height: 18px;
  margin-top: 2px;
  accent-color: var(--corail);
}
.case label { font-size: var(--t-13); font-weight: 400; color: var(--sourdine); margin: 0; }
.case label a { color: var(--texte); }

/* --------------------------------------------------------------------------
   14. Utilitaires
   -------------------------------------------------------------------------- */

.hors-ecran {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.filet-haut { border-top: var(--trait); }
.filet-bas  { border-bottom: var(--trait); }

/* --------------------------------------------------------------------------
   15. En-tête
   Collant en haut, fond application, filet bas. Le logo est le mot complet
   au-delà de 900 px, le monogramme en dessous.
   -------------------------------------------------------------------------- */

html { scroll-padding-top: calc(var(--hauteur-entete) + var(--e-4)); }

.entete {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--fond);
  border-bottom: var(--trait);
}

.entete-in {
  max-width: var(--largeur);
  margin: 0 auto;
  height: var(--hauteur-entete);
  padding-inline: var(--e-5);
  display: flex;
  align-items: center;
  gap: var(--e-6);
}
@media (min-width: 760px) { .entete-in { padding-inline: var(--e-8); } }

.entete-logo { flex: none; display: flex; align-items: center; text-decoration: none; }
.entete-logo img { width: 96px; height: auto; }
.entete-logo .monogramme { width: 26px; }
.entete-logo .mot { display: none; }
@media (min-width: 1000px) {
  .entete-logo .monogramme { display: none; }
  .entete-logo .mot { display: block; }
}

.entete-nav { display: none; }
@media (min-width: 1000px) {
  .entete-nav {
    display: flex;
    align-items: center;
    gap: var(--e-6);
    margin-right: auto;
    font-size: var(--t-13);
  }
  .entete-nav a {
    color: var(--sourdine);
    text-decoration: none;
    padding-block: var(--e-2);
    transition: color var(--transition);
  }
  .entete-nav a:hover { color: var(--texte); }
  .entete-nav a[aria-current="page"] {
    color: var(--creme);
    box-shadow: inset 0 -1px 0 var(--corail);
  }
}

.entete-actions { display: flex; align-items: center; gap: var(--e-3); margin-left: auto; }
@media (min-width: 1000px) { .entete-actions { margin-left: 0; } }

.btn--compact { min-height: 34px; padding: var(--e-2) var(--e-4); font-size: var(--t-13); }

.entete-essai { display: none; }
@media (min-width: 560px) { .entete-essai { display: inline-flex; } }

.entete-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  background: transparent;
  border: var(--trait);
  border-radius: var(--rayon);
  cursor: pointer;
}
.entete-burger rect { fill: var(--texte); }
.entete-burger:hover { border-color: var(--sourdine); }
@media (min-width: 1000px) { .entete-burger { display: none; } }

/* --------------------------------------------------------------------------
   16. Menu plein écran
   -------------------------------------------------------------------------- */

.menu-plein {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--fond-profond);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.menu-plein[hidden] { display: none; }

.menu-tete {
  height: var(--hauteur-entete);
  padding-inline: var(--e-5);
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: var(--trait);
  flex: none;
}
.menu-tete img { width: 96px; }
.menu-fermer {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: var(--trait); border-radius: var(--rayon);
  cursor: pointer;
}
.menu-fermer path { stroke: var(--texte); stroke-width: 1.5; }

.menu-liens { padding: var(--e-4) var(--e-5) var(--e-10); }
.menu-liens a {
  display: flex;
  align-items: baseline;
  gap: var(--e-4);
  padding: var(--e-4) 0;
  border-bottom: var(--trait);
  font-family: var(--serif);
  font-size: var(--t-24);
  color: var(--creme);
  text-decoration: none;
}
.menu-liens a .numero {
  font-family: var(--mono);
  font-size: var(--t-11);
  color: var(--faible);
  flex: none;
  width: 24px;
}
.menu-liens a[aria-current="page"] .numero { color: var(--corail); }
.menu-liens .btn { margin-top: var(--e-8); width: 100%; }

/* --------------------------------------------------------------------------
   17. Pied de page — quatre colonnes
   -------------------------------------------------------------------------- */

.pied {
  background: var(--fond-profond);
  border-top: var(--trait);
  padding-block: var(--e-16) var(--e-8);
  font-size: var(--t-13);
}

.pied-colonnes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-10) var(--e-6);
}
@media (min-width: 900px) {
  .pied-colonnes { grid-template-columns: repeat(4, 1fr); gap: var(--e-8); }
}

.pied-colonnes h2 {
  font-family: var(--mono);
  font-size: var(--t-11);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--sourdine);
  margin: 0 0 var(--e-4);
}
.pied-colonnes ul { list-style: none; margin: 0; padding: 0; }
.pied-colonnes li { margin-bottom: var(--e-3); }
.pied-colonnes a { color: var(--texte); text-decoration: none; }
.pied-colonnes a:hover { color: var(--corail); }

.pied-bas {
  margin-top: var(--e-12);
  padding-top: var(--e-6);
  border-top: var(--trait);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  color: var(--sourdine);
  font-size: var(--t-12);
}
.pied-bas img { width: 82px; opacity: .9; }
.pied-mentions { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); }
.pied-mentions a { color: var(--sourdine); }
.pied-plateforme { font-family: var(--mono); font-size: var(--t-11); color: var(--faible); }

/* --------------------------------------------------------------------------
   18. Ouverture de page
   Le titre occupe toute la largeur utile du texte, la fiche technique
   court sous les boutons. Pas de colonne visuelle à droite.
   -------------------------------------------------------------------------- */

.ouverture { padding-block: var(--e-16) var(--e-12); }
@media (min-width: 760px) { .ouverture { padding-block: var(--e-24) var(--e-16); } }

.ouverture h1 { max-width: 18ch; }
.ouverture .chapo { margin-top: var(--e-6); }
.ouverture .groupe-btn { margin-top: var(--e-8); }

.fiche-technique {
  margin-top: var(--e-8);
  padding-top: var(--e-5);
  border-top: var(--trait);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-5);
  font-family: var(--mono);
  font-size: var(--t-12);
  color: var(--sourdine);
}
.fiche-technique span { display: flex; align-items: center; gap: var(--e-2); }
.fiche-technique span + span::before { content: "·"; color: var(--faible); margin-right: var(--e-2); }
.fiche-technique b { color: var(--creme); font-weight: 500; }

/* --------------------------------------------------------------------------
   19. Séquence chronométrée
   Une durée à gauche, un filet vertical, l'étape à droite. Sert partout
   où l'on décrit un enchaînement mesuré.
   -------------------------------------------------------------------------- */

.sequence { list-style: none; margin: 0; padding: 0; }
.sequence li {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: var(--e-5);
  padding-bottom: var(--e-6);
  position: relative;
}
.sequence li::before {
  content: "";
  position: absolute;
  left: 5px; top: 20px; bottom: -4px;
  width: 1px;
  background: var(--filet);
}
.sequence li:last-child { padding-bottom: 0; }
.sequence li:last-child::before { display: none; }

.sequence .duree {
  font-family: var(--mono);
  font-size: var(--t-12);
  color: var(--corail);
  font-variant-numeric: tabular-nums;
  padding-left: var(--e-5);
  position: relative;
  line-height: 1.7;
}
.sequence .duree::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 11px; height: 11px;
  border: 1px solid var(--corail);
  border-radius: 50%;
  background: var(--fond);
}
.sequence h3 { font-family: var(--sans); font-size: var(--t-15); font-weight: 600; color: var(--creme); margin-bottom: var(--e-1); }
.sequence p { color: var(--sourdine); font-size: var(--t-13); }

@media (min-width: 760px) {
  .sequence li { grid-template-columns: 104px 1fr; }
}

/* --------------------------------------------------------------------------
   20. Liste de fonctions
   Une ligne par fonction : nom, fait vérifiable, lien. Remplace une
   grille de cartes dès qu'il y a plus de trois entrées.
   -------------------------------------------------------------------------- */

.fonctions { border-top: var(--trait); }
.fonctions > a, .fonctions > div {
  display: grid;
  gap: var(--e-1) var(--e-6);
  padding: var(--e-5) 0;
  border-bottom: var(--trait);
  text-decoration: none;
  color: inherit;
}
@media (min-width: 760px) {
  .fonctions > a, .fonctions > div { grid-template-columns: 232px 1fr; align-items: baseline; }
}
.fonctions h3 {
  font-family: var(--sans);
  font-size: var(--t-15);
  font-weight: 600;
  color: var(--creme);
  transition: color var(--transition);
}
.fonctions p { color: var(--sourdine); font-size: var(--t-13); margin: 0; }
.fonctions > a:hover h3 { color: var(--corail); }

/* --------------------------------------------------------------------------
   21. Colonnes de texte asymétriques
   Pour les sections où un paragraphe porte l'argument et une colonne
   étroite porte la nuance ou la limite.
   -------------------------------------------------------------------------- */

.deux-tiers { display: grid; gap: var(--e-8); }
@media (min-width: 900px) {
  .deux-tiers { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--e-16); }
}
.deux-tiers > * { min-width: 0; }

/* --------------------------------------------------------------------------
   22. Bandeau d'appel à l'action
   -------------------------------------------------------------------------- */

.bandeau {
  background: var(--corail-sourd);
  border-top: var(--trait);
  border-bottom: var(--trait);
  padding-block: var(--e-16);
}
.bandeau h2 { max-width: 20ch; }
.bandeau p { color: var(--sourdine); max-width: 56ch; margin-top: var(--e-4); }
.bandeau .groupe-btn { margin-top: var(--e-8); }

/* --------------------------------------------------------------------------
   23. Tarifs
   Trois offres côte à côte, puis le comparatif ligne à ligne en tableau.
   La bascule est une paire de boutons à état, pas un interrupteur : le
   libellé de chaque option reste lisible.
   -------------------------------------------------------------------------- */

.bascule {
  display: inline-flex;
  border: var(--trait);
  border-radius: var(--rayon);
  padding: 3px;
  background: var(--surface);
  gap: 3px;
}
.bascule button {
  font-family: var(--sans);
  font-size: var(--t-13);
  font-weight: 500;
  color: var(--sourdine);
  background: transparent;
  border: 0;
  border-radius: 2px;
  padding: var(--e-2) var(--e-4);
  min-height: 34px;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.bascule button:hover { color: var(--texte); }
.bascule button[aria-pressed="true"] { background: var(--corail); color: var(--sur-corail); }

.offres { display: grid; gap: var(--e-5); }
@media (min-width: 860px) { .offres { grid-template-columns: repeat(3, 1fr); } }

.offre {
  background: var(--surface);
  border: var(--trait);
  border-radius: var(--rayon);
  padding: var(--e-6);
  display: flex;
  flex-direction: column;
}
.offre--mise-en-avant { border-color: var(--corail); background: var(--surface-haute); }

.offre h3 { font-family: var(--sans); font-size: var(--t-15); font-weight: 600; color: var(--creme); margin-bottom: var(--e-1); }
.offre .pour-qui { font-size: var(--t-13); color: var(--sourdine); margin-bottom: var(--e-5); min-height: 3.2em; }

.offre .prix {
  display: flex;
  align-items: baseline;
  gap: var(--e-2);
  font-family: var(--serif);
  font-size: 40px;
  line-height: 1;
  color: var(--creme);
  font-variant-numeric: tabular-nums;
}
.offre .prix .unite { font-family: var(--mono); font-size: var(--t-12); color: var(--sourdine); }
.offre .periode { font-family: var(--mono); font-size: var(--t-11); color: var(--sourdine); margin-top: var(--e-2); }

.offre .inclus { list-style: none; margin: var(--e-6) 0 var(--e-6); padding: 0; font-size: var(--t-13); }
.offre .inclus li { padding: var(--e-2) 0; border-bottom: var(--trait); color: var(--texte); }
.offre .inclus li:last-child { border-bottom: 0; }
.offre .inclus .absent { color: var(--faible); text-decoration: line-through; text-decoration-color: var(--filet); }
.offre .btn { margin-top: auto; }

/* Marque de disponibilité dans le comparatif : le point remplace « oui »,
   le tiret remplace « non ». Chaque cellule garde son texte pour les
   lecteurs d'écran. */
.oui, .non { font-family: var(--mono); font-size: var(--t-13); }
.oui { color: var(--succes); }
.non { color: var(--faible); }

/* --------------------------------------------------------------------------
   24. Blog
   La liste est une suite de lignes datées, pas une grille de vignettes.
   L'article garde la mesure de lecture du corps de texte.
   -------------------------------------------------------------------------- */

.liste-articles { border-top: var(--trait); }
.liste-articles > article { border-bottom: var(--trait); padding: var(--e-8) 0; }
@media (min-width: 860px) {
  .liste-articles > article { display: grid; grid-template-columns: 148px 1fr; gap: var(--e-8); }
  .liste-articles > article > * { min-width: 0; }
}
.liste-articles .meta {
  font-family: var(--mono);
  font-size: var(--t-11);
  color: var(--sourdine);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1) var(--e-3);
  margin-bottom: var(--e-3);
}
@media (min-width: 860px) {
  .liste-articles .meta { flex-direction: column; margin-bottom: 0; padding-top: 5px; }
}
.liste-articles h3 { font-size: var(--t-20); margin-bottom: var(--e-3); }
.liste-articles h3 a { color: var(--creme); text-decoration: none; }
.liste-articles h3 a:hover { color: var(--corail); }
.liste-articles p { color: var(--sourdine); max-width: var(--largeur-texte); }

/* Corps d'article */
.article { max-width: var(--largeur-texte); }
.article > * + * { margin-top: var(--e-5); }
.article h2 {
  font-size: var(--t-24);
  margin-top: var(--e-12);
  padding-top: var(--e-6);
  border-top: var(--trait);
}
.article h3 { font-size: var(--t-17); font-family: var(--sans); font-weight: 600; margin-top: var(--e-8); }
.article > .encadre, .article > .tableau-defilant, .article > pre { margin-top: var(--e-8); }
.article > .encadre + p, .article > .tableau-defilant + p { margin-top: var(--e-8); }

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-5);
  font-family: var(--mono);
  font-size: var(--t-12);
  color: var(--sourdine);
  padding-bottom: var(--e-6);
  border-bottom: var(--trait);
  margin-bottom: var(--e-10);
}

/* Sommaire d'article */
.sommaire {
  border-left: 2px solid var(--filet);
  padding-left: var(--e-5);
  margin: var(--e-8) 0;
}
.sommaire p {
  font-family: var(--mono); font-size: var(--t-11); text-transform: uppercase;
  letter-spacing: .12em; color: var(--sourdine); margin-bottom: var(--e-3);
}
.sommaire ol { list-style: none; margin: 0; padding: 0; font-size: var(--t-13); }
.sommaire li { margin-bottom: var(--e-2); }
.sommaire a { color: var(--texte); text-decoration: none; }
.sommaire a:hover { color: var(--corail); }

/* Article annoncé mais pas encore écrit : pas de lien, pas de fausse date. */
.liste-articles h3.a-paraitre { color: var(--sourdine); }
.liste-articles .attente { color: var(--alerte); }

/* --------------------------------------------------------------------------
   25. États de formulaire
   Envoi en cours, confirmation, échec réseau. Le formulaire n'est jamais
   remplacé sans qu'on sache ce qui s'est passé.
   -------------------------------------------------------------------------- */

.confirmation {
  border: var(--trait);
  border-left: 2px solid var(--succes);
  border-radius: var(--rayon);
  background: var(--succes-fond);
  padding: var(--e-8);
  max-width: 560px;
}
.confirmation h2 {
  font-family: var(--sans);
  font-size: var(--t-17);
  font-weight: 600;
  color: var(--creme);
  margin-bottom: var(--e-3);
}
.confirmation p { color: var(--texte); font-size: var(--t-13); }
.confirmation[hidden] { display: none; }

.btn[data-envoi="en-cours"] { opacity: .6; pointer-events: none; }

/* Panne d'envoi : on rend l'adresse directe, tout de suite. */
.echec-envoi { margin-top: var(--e-5); }
.echec-envoi[hidden] { display: none; }