/* ============================================================
   Efficience et empreinte : la page de présentation et sa
   méthodologie. La palette de la vitrine, et deux teintes de plus,
   seulement dans la maquette de l'écran : l'ambre du CO2e et le
   bleu de l'eau, ceux de l'application.
   ============================================================ */

.empreinte-page,
.methodologie-page {
  --co2: #E5A823;
  --co2-encre: #8A5E05;
  --eau: #2A9CB2;
  --eau-encre: #1C7487;
  /* Le graphique : la même teinte, assez sombre pour 3:1 sur blanc. */
  --barre-petit: #C08008;
  --barre-grand: #6E4A03;
}

/* CO2 : l'indice ne doit pas écarter les lignes. */
.empreinte-page sub,
.methodologie-page sub {
  font-size: 0.72em;
  line-height: 0;
}

/* Les ancres passent sous l'en-tête collant. */
.empreinte-page [id],
.methodologie-page [id] { scroll-margin-top: 5.5rem; }

.page-retour {
  display: inline-block;
  margin-bottom: var(--esp-4);
  color: var(--gris-chaud);
  font-size: 0.84rem;
  text-decoration: none;
}

.page-retour:hover { color: var(--encre); }

/* La mascotte posée sur le papier : bords fondus, comme sur les intégrations. */
.mascotte-libre {
  -webkit-mask-image: radial-gradient(ellipse at center, #000 50%, transparent 72%);
  mask-image: radial-gradient(ellipse at center, #000 50%, transparent 72%);
}

/* ============================================================
   La méthodologie : une lecture longue
   ============================================================ */

.methodologie-tete {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--esp-3);
  align-items: center;
}

.methodologie-tete h1 { margin-bottom: 0; }

.methodologie-tete img { width: clamp(6.5rem, 16vw, 9.5rem); }

/* La fiche de version : le registre d'un document de référence. */
.methodologie-fiche {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  margin: var(--esp-3) 0 var(--esp-4);
  border: 1px solid var(--marine-filet);
  border-radius: var(--r-sm);
  background: var(--blanc);
  font-family: var(--mono);
  font-size: 0.8rem;
  line-height: 1.5;
}

.methodologie-fiche > div { padding: 0.8rem 1.1rem; }
.methodologie-fiche > div + div { border-left: 1px solid var(--filet); }

.methodologie-fiche dt {
  margin-bottom: 0.2rem;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--marine);
}

.methodologie-fiche dd { margin: 0; color: var(--encre); }

.methodologie-bref {
  padding: var(--pad-pave);
  border-radius: var(--r-md);
  background: var(--marine-pale);
}

.methodologie-bref h2 { margin-top: 0; }
.methodologie-bref ul { margin-block: var(--esp-2); }

.methodologie-sommaire {
  margin-block: var(--esp-4);
  padding-block: var(--esp-3);
  border-block: 1px solid var(--filet);
}

.confidentialite-texte .methodologie-sommaire h2 {
  margin: 0 0 var(--esp-2);
  font-family: var(--mono);
  font-size: var(--label);
  font-weight: 600;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--marine);
}

.methodologie-sommaire ol {
  columns: 2;
  column-gap: var(--esp-4);
  margin: 0 0 var(--esp-1);
  padding-inline-start: 1.6rem;
}

.methodologie-sommaire li { break-inside: avoid; }
.methodologie-sommaire li + li { margin-top: 0.3rem; }
.methodologie-sommaire li::marker { font-family: var(--mono); font-size: 0.85em; color: var(--gris-chaud); }

.methodologie h3 { margin-top: var(--esp-3); }

.methodologie-formule {
  margin-block: var(--esp-3);
  padding: 1.1rem 1.3rem;
  overflow-x: auto;
  border: 1px solid var(--filet);
  border-left: 3px solid var(--marine);
  border-radius: var(--r-xs);
  background: var(--blanc);
  font-family: var(--mono);
  font-size: 0.84rem;
  line-height: 1.6;
  overflow-wrap: normal;
}

/* Les lignes alignées restent alignées ; la plus longue revient à la ligne. */
.methodologie-formule code { white-space: pre-wrap; }

/* Compté / non compté : deux colonnes, une coche et un tiret. */
.methodologie-perimetre {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--esp-3);
  margin-block: var(--esp-3);
}

.methodologie-perimetre > div {
  padding: var(--pad-carte);
  border: 1px solid var(--filet);
  border-radius: var(--r-md);
  background: var(--papier-clair);
}

.methodologie-perimetre h3 {
  margin: 0 0 var(--esp-2);
  font-family: var(--mono);
  font-size: var(--label);
  font-weight: 600;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
}

.perimetre-compte h3 { color: var(--action-sombre); }
.perimetre-exclu h3 { color: var(--gris-chaud); }

.methodologie-perimetre ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.96rem;
}

.methodologie-perimetre li {
  position: relative;
  padding-left: 1.5rem;
}

.methodologie-perimetre li + li { margin-top: 0.7rem; }

.methodologie-perimetre li::before {
  position: absolute;
  left: 0;
  font-weight: 700;
}

.perimetre-compte li::before { content: "✓"; color: var(--action); }
.perimetre-exclu li::before { content: "–"; color: var(--gris-chaud); }
.perimetre-exclu li { color: var(--gris-chaud); }

.methodologie-suite {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--esp-5);
  padding: var(--pad-pave);
  border: 1px solid var(--filet);
  border-radius: var(--r-lg);
  background: var(--blanc);
}

.methodologie-suite p {
  margin: 0;
  max-width: 24em;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
}

@media (max-width: 44rem) {
  .methodologie-fiche { grid-template-columns: 1fr; }
  .methodologie-fiche > div + div { border-left: 0; border-top: 1px solid var(--filet); }
  .methodologie-sommaire ol { columns: 1; }
  .methodologie-perimetre { grid-template-columns: 1fr; }
}

/* ============================================================
   La page de présentation
   ============================================================ */

/* Le haut de page sur l'aplat vert, comme le bandeau de l'accueil : marges
   resserrées, texte en papier (5,8:1), boutons inversés, et la mascotte dans
   son médaillon clair, jamais à même l'aplat. */
.empreinte-hero {
  --couleur-signe: var(--papier);
  padding-block: clamp(2.25rem, 4.5vw, 3.75rem);
  background: var(--action);
  color: #DCE8E0;
}

.empreinte-hero h1,
.empreinte-hero .kicker { color: var(--papier); }
.empreinte-hero .kicker::before { background: var(--papier); }
.empreinte-hero .lede { color: #DCE8E0; }

.empreinte-hero .btn { border-color: var(--papier); color: var(--papier); }
.empreinte-hero .btn:hover { background: var(--papier); color: var(--action-sombre); }
.empreinte-hero .btn-primaire { background: var(--papier); color: var(--action-sombre); }
.empreinte-hero .btn-primaire:hover { background: var(--blanc); border-color: var(--blanc); color: var(--action-sombre); }

.hero-medaillon { width: clamp(13rem, 24vw, 19rem); justify-self: start; }

/* La fiche mord sur le bas du médaillon, sans cacher la mascotte. */
.empreinte-hero .fiche { margin-top: -2.75rem; }

/* « Parler de votre projet » est plus long que « Commencer » : pas de largeur
   fixe ici, le bouton garde ses marges. */
.empreinte-page .header-cta { inline-size: auto; }


.empreinte-levier { align-items: start; }
.empreinte-levier > .illustration { margin-top: var(--esp-4); }

/* Les trois niveaux, comme le sélecteur de l'application. */
.niveaux {
  display: grid;
  gap: 0;
  margin: var(--esp-3) 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--filet);
  border-radius: var(--r-md);
  background: var(--blanc);
  overflow: hidden;
}

.niveaux li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.9rem;
  align-items: center;
  padding: 0.95rem 1.15rem;
}

.niveaux li + li { border-top: 1px solid var(--filet); }

.niveau-icone {
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: var(--r-sm);
  background: var(--marine-pale);
  color: var(--marine);
}

.niveaux strong { display: block; font-size: 1rem; line-height: 1.3; }
.niveaux small { display: block; color: var(--gris-chaud); font-size: 0.9rem; line-height: 1.45; }

.niveau-defaut { background: color-mix(in srgb, var(--action) 7%, var(--blanc)); }
.niveau-defaut .niveau-icone { background: var(--action); color: var(--action-contraste); }

.niveau-etiquette {
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--action);
  border-radius: var(--r-pilule);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--action-sombre);
  white-space: nowrap;
}

/* Le contexte : une conviction, puis trois points côte à côte. */
.contexte {
  margin-top: var(--esp-5);
  padding-top: var(--esp-4);
  border-top: 1px solid var(--filet);
}

.contexte .epigraphe {
  margin: 0 0 var(--esp-3);
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  line-height: 1.35;
}

.contexte .def-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-3); }

.preuves {
  display: grid;
  gap: 0.6rem;
  margin: var(--esp-3) 0 0;
  padding: var(--esp-3) 0 0;
  border-top: 1px solid var(--filet);
  list-style: none;
}

.preuves li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--gris-chaud);
  font-size: 0.98rem;
}

.preuves li::before {
  content: "✓";
  position: absolute;
  left: 0;
  font-weight: 700;
  color: var(--action);
}

.preuves strong { color: var(--encre); }

/* La mesure : quatre points, puis la maquette de l'écran. */
.mesure-liste { margin: var(--esp-3) 0 0; }
.mesure-liste > div { padding-block: 0.9rem; border-top: 1px solid var(--filet); }
.mesure-liste dt { font-weight: 700; margin-bottom: 0.2rem; }
.mesure-liste dd { margin: 0; color: var(--gris-chaud); font-size: 0.98rem; }

/* La maquette de l'écran Consommation : la carte de l'application, avec
   l'ambre du CO2e et le bleu de l'eau. */
.ecran { margin: var(--esp-4) 0 0; }

.ecran-carte {
  padding: 1.35rem 1.5rem 1.5rem;
  border: 1px solid var(--filet);
  border-radius: var(--r-md);
  background: var(--blanc);
  box-shadow: 0 18px 40px -24px rgba(14, 34, 56, 0.35);
}

.ecran-tete {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.4rem 1rem;
  margin-bottom: 0.4rem;
}

.ecran-tete strong { font-size: 1.05rem; }

.ecran-tete span { font-size: 0.85rem; color: var(--gris-chaud); }

.jauge { padding-top: 1.1rem; }
.jauge + .jauge { margin-top: 1.1rem; border-top: 1px solid var(--filet); }

.jauge-tete {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.3rem 1rem;
  margin-bottom: 0.7rem;
}

.jauge-chiffre {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0;
}

.jauge-picto { align-self: center; flex: none; }
.jauge-co2 .jauge-picto { color: var(--co2-encre); }
.jauge-eau .jauge-picto { color: var(--eau-encre); }

.jauge-chiffre strong {
  font-size: clamp(1.9rem, 3.4vw, 2.4rem);
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1;
}

.jauge-chiffre span { color: var(--gris-chaud); font-size: 0.95rem; }
.jauge-mesure { font-size: 0.82rem; color: var(--gris-chaud); }

/* La barre : le mesuré en plein, la projection hachurée, sur la piste. */
.jauge-barre {
  --teinte: var(--co2);
  position: relative;
  height: 0.85rem;
  border-radius: var(--r-xs);
  overflow: hidden;
  background: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--teinte) 55%, transparent) 0 2px,
    color-mix(in srgb, var(--teinte) 18%, transparent) 2px 6px);
}

.jauge-eau .jauge-barre { --teinte: var(--eau); }

.jauge-barre span {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--mesure);
  border-right: 2px solid var(--blanc);
  background: var(--teinte);
}

.jauge-reperes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem 1rem;
  margin: 0.8rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.84rem;
  color: var(--gris-chaud);
}

.jauge-reperes b { color: var(--encre); }

.ecran figcaption {
  margin-top: 0.8rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--gris-chaud);
}

/* La méthode : la mascotte au verre doseur prend la place de la montre. */
.methode-mascotte { width: clamp(9rem, 16vw, 13rem); justify-self: center; }
.methode-suite { margin-top: var(--esp-4); }
.methode-suite .note-marge { margin: 0; }

/* Notre parti pris */
.parti-pris { margin-block: 0 var(--esp-4); }
.parti-pris-mot { max-width: 34em; margin: 0; }


/* L'appel final */
/* Sur le papier, pas sur le bleu pâle : la mascotte s'y fond sans halo. */
.empreinte-appel { border-top: 1px solid var(--filet); }

.empreinte-appel-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr);
  gap: var(--esp-4);
  align-items: center;
}

.empreinte-appel-grille img { width: min(100%, 17rem); justify-self: center; }
.empreinte-appel h2 { max-width: 22ch; }
.empreinte-appel p:not(.kicker) { max-width: 58ch; color: var(--encre-douce); }
.empreinte-appel .groupe-btn { margin-top: var(--esp-3); }

@media (max-width: 56rem) {
  .empreinte-levier > .illustration { margin-top: 0; width: min(100%, 20rem); }
  .empreinte-levier-inverse > .illustration { order: 2; }
  .contexte .def-liste { grid-template-columns: 1fr; }
  .empreinte-appel-grille { grid-template-columns: 1fr; }
  .empreinte-appel-grille img { width: min(60%, 13rem); }
}

@media (max-width: 40rem) {
  .niveaux li { grid-template-columns: auto minmax(0, 1fr); }
  .niveau-etiquette { grid-column: 2; justify-self: start; }
  .jauge-reperes { grid-template-columns: 1fr; }
}

/* ============================================================
   Le graphique : deux niveaux, trois gammes, une seule échelle.
   L'ambre de l'empreinte, clair pour « Au quotidien », profond pour
   « Grand dossier » (paire ordinale validée, 3:1 sur blanc). Barres
   fines, bout arrondi, valeur au bout ; le détail est dans le tableau.
   ============================================================ */

.comparaison {
  margin: var(--esp-5) 0 0;
  padding: var(--pad-pave);
  border: 1px solid var(--filet);
  border-radius: var(--r-lg);
  background: var(--blanc);
}

.comparaison-tete { max-width: var(--largeur-lecture); margin-bottom: var(--esp-3); }
.comparaison-tete .kicker { margin-bottom: var(--esp-2); }
.comparaison-tete h3 { font-size: clamp(1.35rem, 2.6vw, 1.75rem); margin-bottom: 0.6rem; }
.comparaison-tete p:not(.kicker) { color: var(--gris-chaud); font-size: 0.98rem; }

.comparaison-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.6rem;
  margin: 0 0 var(--esp-3);
  padding: 0;
  list-style: none;
  font-size: 0.88rem;
  color: var(--encre-douce);
}

.comparaison-legende li { display: inline-flex; align-items: center; gap: 0.5rem; }

.cle { width: 0.9rem; height: 0.9rem; border-radius: 3px; }
.cle-petit, .barre-petit { background: var(--barre-petit); }
.cle-grand, .barre-grand { background: var(--barre-grand); }

/* Le nom de la gamme à gauche, les barres sur une même ligne de base. */
.comparaison-ligne {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  align-items: center;
}

.comparaison-gamme { padding-right: 1rem; font-weight: 650; font-size: 0.95rem; }

.comparaison-paire {
  display: grid;
  gap: 2px;
  padding-block: 0.75rem;
  border-left: 1px solid var(--filet);
}

.barre-ligne {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 1.6rem;
}

.barre {
  flex: none;
  width: calc((100% - 11rem) * var(--f));
  min-width: 3px;
  height: 14px;
  border-radius: 0 4px 4px 0;
}


.barre-valeur {
  font-size: 0.86rem;
  color: var(--encre-douce);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.barre-ratio {
  margin-left: 0.35rem;
  padding: 0.05rem 0.45rem;
  border-radius: var(--r-pilule);
  background: var(--papier);
  font-weight: 700;
  color: var(--encre);
}


.comparaison-donnees { margin-top: var(--esp-3); }

.comparaison-donnees summary {
  cursor: pointer;
  font-weight: 650;
  font-size: 0.92rem;
  color: var(--marine);
}

.comparaison-donnees .confidentialite-tableau { margin-bottom: 0; }
.comparaison-donnees table { font-size: 0.9rem; }

.comparaison-source {
  margin: var(--esp-3) 0 0;
  font-size: 0.82rem;
  color: var(--gris-chaud);
  max-width: 60rem;
}

@media (max-width: 44rem) {
  .comparaison-ligne { grid-template-columns: 1fr; }
  .comparaison-gamme { padding-top: 0.5rem; }
  .comparaison-paire { padding-top: 0.35rem; }
}


/* L'hébergement : le logo de Scaleway en grand à côté du titre, trois points,
   puis le chiffre du mix électrique. */
.hebergement-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3) var(--esp-4);
  margin-bottom: var(--esp-4);
}

.hebergement-tete .entete-section { max-width: 40rem; margin-bottom: 0; }

.logo-scaleway {
  height: clamp(2.6rem, 5vw, 4rem);
  width: auto;
}

.hebergement-points { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-3); }

.chiffre-mix {
  display: grid;
  gap: 0.5rem;
  max-width: 44rem;
  margin: var(--esp-4) 0 0;
  padding-top: var(--esp-4);
  border-top: 1px solid var(--encre-douce);
}

.chiffre-mix strong {
  font-size: clamp(2.2rem, 4.6vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--papier);
}

.chiffre-mix span { color: var(--gris-clair); font-size: 1rem; }
.chiffre-mix small { color: #7F97AD; font-size: 0.8rem; }

@media (max-width: 56rem) {
  .hebergement-points { grid-template-columns: 1fr; }
}

/* Une source citée mot pour mot : le filet, la serif, l'auteur dessous. */
.citation {
  margin: var(--esp-3) 0 0;
  padding-left: 1.2rem;
  border-left: 3px solid var(--action);
}

.citation blockquote { margin: 0; }

.citation p {
  margin: 0 0 0.4rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.08rem;
  line-height: 1.5;
}

.citation figcaption { font-size: 0.84rem; color: var(--gris-chaud); }
.citation cite { font-style: normal; }

/* Numérique responsable : une recommandation de l'ADEME, en face ce que fait Spine. */
.recommandations {
  display: grid;
  gap: var(--esp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.recommandations li {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--filet);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--blanc);
}

.recommandations p { margin: 0; padding: 1.1rem 1.4rem; }
.reco-ademe { color: var(--gris-chaud); }
.reco-spine { background: color-mix(in srgb, var(--action) 7%, var(--blanc)); color: var(--encre); font-weight: 550; }

.recommandations span {
  display: block;
  margin-bottom: 0.3rem;
  font-family: var(--mono);
  font-size: var(--label);
  font-weight: 600;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
}

.reco-ademe span { color: var(--marine); }
.reco-spine span { color: var(--action-sombre); }

@media (max-width: 44rem) {
  .recommandations li { grid-template-columns: 1fr; }
}