/* ==========================================================================
   Les Techniciens du Solaire — feuille de styles (version de test)
   --------------------------------------------------------------------------
   1. Polices (Archivo, hébergée localement)
   2. Jetons (couleurs, typographies, espacements)
   3. Base (éléments HTML, boutons, champs)
   4. Règles globales de mise en page
   5. Structure du site, utilitaires, formulaire
   6. Composants (valeurs reprises à l'identique de la maquette)
   7. États de survol et interactions
   8. Responsive et préférences de mouvement

   Ordre important : les composants (6) viennent après les règles globales (4)
   pour conserver la même priorité que les styles écrits en ligne dans la maquette.
   ========================================================================== */


/* 1. Polices ================================================================ */

/* Archivo — SIL Open Font License.

   Les deux fichiers sont des polices VARIABLES : un seul axe de graisse,
   de 100 a 900 (verifie avec fontTools : axe « wght », instance par defaut
   600). Ils etaient declares comme trois graisses fixes — 400, 600, 800 —
   ce qui avait deux consequences mesurables :

   — « font-weight: 700 », utilise une vingtaine de fois dans le site et
     dans les courriels, ne correspondait a aucune face. Le navigateur
     remontait a la graisse superieure la plus proche et servait du 800.
   — « font-weight: calc(400 + 200 * var(--w)) », qui anime la graisse des
     benefices epingles, ne pouvait pas s'interpoler : la graisse sautait
     de 400 a 600 au lieu de glisser.

   Une face par jeu de caracteres, avec la plage complete, corrige les deux
   et retire quatre regles. */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/archivo-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/archivo-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }


/* 2. Jetons ================================================================= */

:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;

  /* Alternance des chapitres.
     Un chapitre sur deux est pose sur --color-chapitre : la teinte verte
     tres pale marque la coupure bien plus nettement que deux gris voisins.
     Les cartes posees dessus passent en blanc pour rester lisibles, et la
     barre de navigation devient blanche pour ne pas se fondre dedans. */
  --color-chapitre: #e8f1e2;
  --color-carte: #ffffff;
  --color-navbar: #ffffff;
  --color-text: #201e1d;
  --color-divider: color-mix(in srgb, #201e1d 40%, transparent);
  --color-neutral-800: #444141;

  /* Charte verte */
  --color-accent: #3c8a2b;
  --color-accent-100: #f0f7ec;   /* fond barre de navigation, encarts clairs */
  --color-accent-200: #dcecd4;   /* pastilles d'icônes, étiquettes */
  --color-accent-300: #bcdcac;   /* encart contact, barre CTA fixe */
  --color-accent-400: #8cc472;   /* accents sur fond sombre */
  --color-accent-500: #5aa93d;
  --color-accent-600: #327424;
  --color-accent-700: #265b1c;   /* texte vert sur fond clair (contraste AA) */
  --color-accent-800: #1b4215;   /* liens de navigation */
  --color-accent-900: #122d10;   /* texte sur fonds verts clairs */
  /* 2.57.0 — vert des fonds qui portent un texte clair (boutons, bandeau,
     appel final, confirmation). #327424 : contraste 5,14:1 avec le texte
     clair, contre 3,87:1 pour --color-accent. Les mots verts des titres,
     les pictogrammes et le logo gardent --color-accent. */
  --color-accent-fond: var(--color-accent-600);
  --sun: #f5b111;

  /* Echelle typographique : onze tailles pour tout le site.
     Toute taille de texte passe par l'un de ces jetons — c'est ce qui
     tient la hierarchie. Le texte courant ne descend jamais sous 16 px. */
  --t-h1:      clamp(38px, 5.4vw, 76px);   /* banniere d'accueil */
  --t-h1-page: clamp(34px, 4.4vw, 56px);   /* titre des autres pages */
  --t-h2:      clamp(30px, 3.4vw, 46px);   /* titres de chapitre */
  --t-h2-s:    clamp(24px, 2.4vw, 32px);   /* titres de bandeau et de tuile */
  --t-h3:      22px;                       /* titres de carte */
  --t-lead:    clamp(17px, 1.3vw, 19px);   /* chapeaux */
  --t-body:    17px;                       /* texte courant */
  --t-small:   16px;                       /* texte secondaire — plancher */
  --t-label:   12px;                       /* etiquettes, en capitales */
  --t-ui:      15px;                       /* boutons, navigation, champs */
  --t-stat:    clamp(32px, 3.4vw, 56px);   /* grands chiffres */

  /* Respiration entre les chapitres.
     Principe : beaucoup d'air ENTRE les chapitres, peu d'air A L'INTERIEUR.
     C'est ce contraste qui fait lire la page comme une suite de chapitres
     et non comme un empilement de composants. */
  --gap-section:  clamp(80px, 8vw, 140px);  /* avant/apres un chapitre */
  --gap-titre:    clamp(24px, 2.2vw, 32px); /* du titre a son contenu */
  --gap-cartes:   24px;                     /* entre deux cartes d'une meme grille */

  --font-heading: "Archivo", system-ui, sans-serif;
  --font-heading-weight: 800;
  --font-body: "Archivo", system-ui, sans-serif;

  --space-1: 4.0px;
  --space-2: 8.0px;
  --space-3: 12.0px;
  --space-4: 16.0px;

  --radius-md: 0px;

  /* Animation d'apparition au défilement (surchargée sur l'accueil via data-reveal-*) */
  --ease-out: cubic-bezier(.22,1,.36,1);
}


/* 3. Base =================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: clamp(96px, 12vw, 124px); }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--t-body); line-height: 1.6; font-weight: 400;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: var(--t-h1-page); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
h4 { font-size: var(--t-h3); }
h5 { font-size: var(--t-small); }
h6 { font-size: var(--t-label); letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-text); text-decoration: none; text-underline-offset: 3px; }
a:hover { color: var(--color-accent-700); }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: var(--t-label); margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* Boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: var(--t-ui); line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent-fond); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-700); }
.btn-primary:active { background: var(--color-accent-800); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }

/* Champs de formulaire */
.field > label {
  display: block; font-size: var(--t-label); margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: var(--t-small); color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }


/* 4. Règles globales de mise en page ======================================= */

.btn { border-radius: 999px; }

/* Un mot en valeur dans un titre --------------------------------------------

   Le vert du logo, pose sur un mot du titre. Deux teintes, et c'est
   necessaire : le vert fonce tient le contraste sur fond clair mais
   disparait sur le fond noir des bandeaux d'etapes ou de la banniere ;
   le vert clair fait l'inverse. La regle suit donc le fond, et non le
   niveau de titre.

   Le mot garde la graisse et la taille du titre : seule la couleur change.
   Un titre dont on colorerait la moitie ne met plus rien en valeur — un
   mot, deux au plus. */
.ltds-accent { color: var(--color-accent-700); }

/* Sur fond sombre : les bannieres, le bandeau des etapes, le mot du
   dirigeant, le pied de page. Ces conteneurs portent « ltds-sur-sombre »,
   pose a la main : une regle qui devinerait le fond a partir du style en
   ligne se tromperait au premier changement de maquette. */
.ltds-sur-sombre .ltds-accent,
.ltds-encart--message .ltds-accent,
.ltds-footer .ltds-accent {
  color: var(--color-accent-400);
}

/* Bandeaux horizontaux ------------------------------------------------------

   Un seul composant pour les trois bandeaux du site : les solutions, les
   étapes d'un projet, les réalisations. Avant, chacun avait sa mécanique —
   deux glissaient par transformation CSS, le troisième était un conteneur
   défilant — d'où des comportements qui ne se ressemblaient pas d'une page
   à l'autre, et aucun moyen d'avancer soi-même sur les deux premiers.

   La base est la même partout : un conteneur qu'on fait défiler au doigt, à
   la molette ou avec les flèches, les cartes se calant l'une après l'autre.
   Le défilement automatique n'est qu'une couche posée par-dessus, que
   main.js n'active que sur un écran à souris — la classe « ltds-bande--auto ».
   Là, le calage est désactivé : il se battrait avec le mouvement. */
.ltds-bande-piste {
  display: flex;
  gap: var(--gap-cartes);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.ltds-bande-piste::-webkit-scrollbar { display: none; }
.ltds-bande--auto .ltds-bande-piste { scroll-snap-type: none; }
/* Le calage porte sur les cartes, pas sur les groupes qui les contiennent :
   sinon le navigateur hesite entre deux reperes et peut s'arreter entre
   deux logos. */
.ltds-bande-piste [data-bande-item] { scroll-snap-align: start; }

/* La seconde copie n'existe que pour que la boucle automatique n'ait pas de
   couture. Sans défilement automatique, elle ferait lire deux fois la même
   chose : elle n'apparaît que lorsque main.js a armé la boucle. */
.ltds-bande-piste > [data-bande-copie] { display: flex; gap: var(--gap-cartes); }
.ltds-bande-piste > [data-bande-copie] + [data-bande-copie] { display: none; }
.ltds-bande--auto .ltds-bande-piste > [data-bande-copie] + [data-bande-copie] { display: flex; }

/* Les flèches. Elles ne servent à rien sans JavaScript, et c'est JavaScript
   qui les révèle : la classe est posée sur <html> par main.js. */
.ltds-bande-fleches { display: none; gap: 10px; align-items: center; }
.ltds-bandeaux-js .ltds-bande-fleches { display: inline-flex; }
.ltds-bande-fleche {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border: 1px solid var(--color-bordure, rgba(32,30,29,0.14));
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: 999px;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  transition: background 0.2s, color 0.2s, border-color 0.2s, opacity 0.2s;
}
.ltds-bande-fleche:hover,
.ltds-bande-fleche:focus-visible {
  background: var(--color-text);
  color: var(--color-bg);
  border-color: var(--color-text);
}
.ltds-bande-fleche[disabled] { opacity: 0.32; cursor: default; }
.ltds-bande-fleche[disabled]:hover {
  background: var(--color-surface);
  color: var(--color-text);
}
/* Sur fond sombre — le bandeau des étapes — les flèches s'inversent. */
.ltds-bande--sombre .ltds-bande-fleche {
  background: rgba(243,242,242,0.10);
  border-color: rgba(243,242,242,0.22);
  color: var(--color-bg);
}
.ltds-bande--sombre .ltds-bande-fleche:hover,
.ltds-bande--sombre .ltds-bande-fleche:focus-visible {
  background: var(--color-bg);
  color: var(--color-text);
}

/* Bandeau des solutions : les flèches se placent au-dessus de la piste, à
   droite, là où l'œil arrive après le titre. */
.ltds-bande .ltds-bande-fleches { margin: 26px 0 0; }
#solutions .ltds-bande-fleches { justify-content: flex-end; width: 100%; }
.ltds-solpiste { margin-top: 14px; padding-bottom: 6px; }
.ltds-solgroupe { align-items: stretch; }

/* Bandeau des étapes. */
.ltds-etappiste { margin-top: 30px; gap: 20px; padding-bottom: 6px; }
.ltds-bande--sombre .ltds-bande-fleches { margin-top: 30px; }
.ltds-etappiste > [data-bande-copie] { gap: 20px; }

/* Bandeau des réalisations : la piste déborde volontairement des marges du
   texte, les cartes commencent au même fer que le titre. */
.ltds-refpiste {
  padding: 8px clamp(24px, 4vw, 64px) clamp(40px, 5vw, 64px);
  scroll-padding-left: clamp(24px, 4vw, 64px);
}

/* Barre de navigation */
[data-navbar] { gap: 24px; justify-content: flex-start; }
[data-nav] { gap: 26px; font-size: var(--t-ui); min-width: 0; margin-right: 10px; }
[data-navbar] > a:first-child img { height: 38px !important; }
[data-navbar] a img { display: block; }

/* Accueil */
#profils a[data-tile], #solutions article { border-radius: 22px; overflow: hidden; }
#solutions article img { border-radius: 0; }
/* Photo de la section « Qui sommes-nous » de l'accueil.

   Elle etait figee en 4/3,2 pendant que la colonne de gauche — titre,
   chapeau, trois reperes, bouton — descendait bien plus bas : la photo
   s'arretait au tiers et laissait un grand vide sous elle. Sur un ecran
   large elle epouse donc la hauteur du texte ; en une seule colonne, elle
   reprend son format paysage. */
#apropos figure img { border-radius: 18px; }
.ltds-apropos-img {
  width: 100%;
  aspect-ratio: 4 / 3.2;
  object-fit: cover;
}
@media (min-width: 900px) {
  .ltds-apropos-grille { align-items: stretch; }
  .ltds-apropos-figure {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  /* 2.64.2 — la photo prend la hauteur du texte sans jamais l'imposer :
     base de flex nulle. Avant, une photo haute ou en portrait (choisie le
     04/11) donnait sa propre hauteur a la rangee et etirait la section. */
  .ltds-apropos-img {
    aspect-ratio: auto;
    flex: 1 1 0;
    height: 0;
    min-height: 440px;
  }
}


/* 5. Structure du site, utilitaires, formulaire ============================ */

.ltds-site {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  overflow-x: hidden;
  overflow-x: clip; /* "clip" ne casse pas position: sticky (encart des réalisations) */
}

/* Lien d'évitement clavier : invisible tant qu'il n'a pas le focus */
.ltds-skip-link {
  position: absolute; left: 12px; top: -100px; z-index: 100;
  background: var(--color-accent-900); color: #fff;
  padding: 10px 16px; border-radius: 999px;
  font-family: var(--font-heading); font-weight: 700; font-size: var(--t-ui);
}
.ltds-skip-link:focus { top: 12px; color: #fff; }

/* Sur-titre de section (anciennement <h6>, même rendu) */
.ltds-eyebrow {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: var(--t-label); line-height: 1.12; letter-spacing: 0.08em; text-transform: uppercase;
  margin: 0; color: var(--color-accent-700);
}

/* Apparition au défilement : masqué seulement si JavaScript est actif.

   Deuxième garde-fou : le marqueur « js » est posé par une ligne dans
   l'en-tête, mais c'est main.js qui fait réapparaître les contenus. Si ce
   fichier ne se charge pas — réseau coupé en cours de route, script bloqué,
   erreur sur un navigateur ancien — tout le site resterait blanc. Tant que
   main.js n'a pas signalé sa présence, une animation retardée ramène donc
   les contenus d'elle-même, sans JavaScript. main.js pose la classe
   « ltds-reveal-js » dès son initialisation et reprend la main. */
.js [data-reveal] {
  opacity: 0;
  animation: ltds-apparition-secours 700ms cubic-bezier(.22, 1, .36, 1) 2600ms both;
}
.js.ltds-reveal-js [data-reveal] { animation: none; }
@keyframes ltds-apparition-secours {
  to { opacity: 1; transform: none; }
}

/* Formulaire : champ anti-spam invisible */
.ltds-hp {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.ltds-form-status {
  margin: 0; font-size: var(--t-label); font-weight: 600; line-height: 1.45;
  color: #9b1c0e;
}

/* 2.64.1 — case d'accord prealable a l'envoi : encadree, signalee comme
   obligatoire, case agrandie. Cochee, le cadre passe au vert. */
.ltds-consentement-form {
  display: grid; gap: 8px; cursor: pointer;
  background: #fff; border: 2px solid var(--color-accent); border-radius: 16px;
  padding: 14px 16px; transition: background 0.2s;
}
.ltds-consentement-form:has(input:checked) { background: var(--color-accent-100); }
.ltds-consentement-form-tete {
  justify-self: start;
  font-family: var(--font-heading); font-weight: 700; font-size: var(--t-label);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-accent-800); background: var(--color-accent-100);
  border-radius: 999px; padding: 4px 10px;
}
.ltds-consentement-form:has(input:checked) .ltds-consentement-form-tete { background: #fff; }
.ltds-consentement-form-ligne {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: var(--t-ui); line-height: 1.5;
}
.ltds-consentement-form-ligne input {
  width: 22px; height: 22px; margin: 1px 0 0; flex-shrink: 0;
  accent-color: var(--color-accent); cursor: pointer;
}

/* Suggestions d'adresse */
.ltds-suggest-item {
  padding: 10px 12px; border-radius: 10px; font-size: var(--t-ui); line-height: 1.35;
  cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ltds-suggest-item:hover,
.ltds-suggest-item[aria-selected="true"] { background: var(--color-accent-100); }

/* Carte de localisation du site (Leaflet, tuiles IGN).
   Le repere ne bouge pas : il marque le centre du cadre, et c'est la carte
   qu'on deplace dessous. Il est donc pose par-dessus, hors des couches
   Leaflet, et ne doit intercepter aucun geste. */
.ltds-carte {
  position: relative;
  height: 220px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--color-surface);
  isolation: isolate;
}
.ltds-carte-vue { position: absolute; inset: 0; z-index: 0; }
.ltds-carte-pin {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 500;
  width: 34px;
  height: 34px;
  margin: -34px 0 0 -17px;
  pointer-events: none;
  filter: drop-shadow(0 4px 6px rgba(20, 18, 17, 0.4));
  transition: transform 0.18s ease;
}
.ltds-carte-pin.is-leve { transform: translateY(-6px) scale(1.06); }

.ltds-carte-outils {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 500;
  display: flex;
  gap: 4px;
}
.ltds-carte-bouton {
  border: 0;
  cursor: pointer;
  border-radius: 10px;
  padding: 7px 11px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-text);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--t-label);
  line-height: 1;
  box-shadow: 0 2px 8px -2px rgba(20, 18, 17, 0.35);
}
.ltds-carte-bouton.is-actif { background: var(--color-accent-fond); color: #fff; }
.ltds-carte-bouton:disabled { opacity: 0.55; cursor: default; }
.ltds-carte-ici {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Les commandes de Leaflet reprennent les formes du site. */
.ltds-carte .leaflet-control-zoom a {
  border-radius: 10px;
  color: var(--color-text);
  font-weight: 700;
}
.ltds-carte .leaflet-control-attribution {
  /* Leaflet la pose a 11px ; rien sur le site ne descend sous --t-label. */
  font-size: var(--t-label);
  background: rgba(255, 255, 255, 0.82);
  padding: 1px 6px;
  border-radius: 6px 0 0 0;
}
.ltds-carte .leaflet-control-attribution a { color: var(--color-accent-800); }


/* 6. Composants ============================================================= */
/* Valeurs strictement identiques aux styles en ligne de la maquette. Le sélecteur
   "a.classe" garantit la même priorité que l'ancien style en ligne face à a:hover. */

.ltds-footer-link,
a.ltds-footer-link {
  color: var(--color-text);
}
.ltds-step-title,
a.ltds-step-title {
  /* Un titre d'etape ne peut pas etre plus petit que le texte qu'il coiffe :
     a --t-ui (15px) il passait sous --t-small (16px) de .ltds-step-text. */
  font-size: var(--t-body);
  margin: 10px 0 0;
  color: var(--color-bg);
}
.ltds-step-text,
a.ltds-step-text {
  font-size: var(--t-small);
  line-height: 1.55;
  margin: 10px 0 0;
  opacity: 0.8;
}
.ltds-step-num,
a.ltds-step-num {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  color: var(--color-accent-400);
}
.ltds-step-card,
a.ltds-step-card {
  flex: 0 0 clamp(230px, 24vw, 300px);
  background: rgba(243,242,242,0.07);
  border-radius: 20px;
  padding: 24px 22px;
}
.ltds-menu-link,
a.ltds-menu-link {
  padding: 13px 16px;
  border-radius: 14px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--t-ui);
  color: var(--color-accent-800);
}
.ltds-menu-link-active,
a.ltds-menu-link-active {
  padding: 13px 16px;
  border-radius: 14px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--t-ui);
  color: var(--color-accent);
}
.ltds-nav-link,
a.ltds-nav-link {
  padding: 8px 2px;
  color: var(--color-accent-800);
}
.ltds-nav-link-active,
a.ltds-nav-link-active {
  padding: 8px 2px;
  color: var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
}
.ltds-card-text,
a.ltds-card-text {
  font-size: var(--t-small);
  line-height: 1.55;
  margin: 10px 0 0;
}
.ltds-card-body,
a.ltds-card-body {
  padding: 20px 22px 0;
}
.ltds-icon-badge,
a.ltds-icon-badge {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: var(--color-accent-200);
  color: var(--color-accent-800);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.ltds-benefit-item,
a.ltds-benefit-item {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: var(--t-body);
  line-height: 1.4;
  /* Blanc plutot que le gris d'origine : pose sur un chapitre vert, un gris
     clair vire au terne. Le blanc se detache aussi bien du vert que du fond
     de page. */
  background: var(--color-carte);
  border-radius: 16px;
  padding: 16px 18px;
}

/* Benefices qui defilent au scroll ------------------------------------------
   La section reste a l'ecran pendant que les puces se relaient : celle qui a
   la main grossit, les autres se replient. Tout est pilote par --w, un poids
   entre 0 et 1 que le script recalcule a chaque image. Declare en @property
   pour qu'il s'interpole : sans cela, la carte sauterait d'un palier a l'autre.
   Rien de tout cela ne s'applique sous 900 px ni sans JavaScript. */
@property --w { syntax: '<number>'; inherits: true; initial-value: 0; }

.ltds-epingle { position: relative; }
.ltds-epingle-cadre { display: block; }


@media (min-width: 900px) {
  html.js .ltds-epingle--actif .ltds-epingle-cadre {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    min-height: 100vh;
  }
  /* Le chapitre remplit l'ecran pendant qu'il est epingle : sans cela, on
     verrait une bande du fond de page au-dessus et en dessous du vert. */
  html.js .ltds-epingle--actif .ltds-epingle-cadre > .ltds-section {
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
  html.js .ltds-epingle--actif .ltds-epingle-cadre > .ltds-section > div { width: 100%; }

  html.js .ltds-epingle--actif .ltds-benefit-item {
    --w: 0;
    overflow: hidden;
    padding: calc(16px + 4px * var(--w)) calc(18px + 4px * var(--w));
    height: calc(var(--replie) + (var(--actif) - var(--replie)) * var(--w));
    box-shadow: 0 calc(2px + 10px * var(--w)) calc(6px + 26px * var(--w)) rgba(32, 30, 29, calc(0.03 + 0.07 * var(--w)));
    transition: --w 0.14s linear;
    position: relative;
  }
  /* Pendant la mesure des deux hauteurs, l'interpolation fausserait le releve. */
  html.js .ltds-epingle .ltds-benefit-item.ltds-mesure { transition: none; }
  html.js .ltds-epingle--actif .ltds-benefit-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--color-accent-700);
    opacity: var(--w);
  }
  html.js .ltds-epingle--actif .ltds-icon-badge {
    width: calc(38px + 12px * var(--w));
    height: calc(38px + 12px * var(--w));
  }
  html.js .ltds-epingle--actif .ltds-icon-badge svg {
    width: calc(19px + 7px * var(--w));
    height: calc(19px + 7px * var(--w));
  }
  html.js .ltds-epingle--actif .ltds-benefit-texte {
    font-size: calc(var(--t-small) + 6px * var(--w));
    line-height: 1.35;
    font-weight: calc(400 + 200 * var(--w));
    letter-spacing: calc(-0.01em * var(--w));
    opacity: calc(0.66 + 0.34 * var(--w));
  }
}

@media (prefers-reduced-motion: reduce) {
  html.js .ltds-epingle--actif .ltds-benefit-item { transition: none; }
}

/* 2.62.0 — Rail le long des cartes qui defilent : un trait gris, un point
   par carte, le point de la carte active plein et vert, le trait vert qui
   descend avec le defilement. Seulement quand l'effet est actif (900 px et
   plus, avec JavaScript) ; sinon la liste s'affiche normalement. */
.ltds-rail { display: none; }
.ltds-rail-cadre { display: grid; }
@media (min-width: 900px) {
  html.js .ltds-epingle--actif .ltds-rail-cadre {
    position: relative;
    padding-left: 40px;
  }
  html.js .ltds-epingle--actif .ltds-rail {
    display: block;
    position: absolute;
    left: 6px;
    top: 0;
    bottom: 0;
    width: 18px;
    pointer-events: none;
  }
  .ltds-rail-fond,
  .ltds-rail-plein {
    position: absolute;
    left: 8px;
    width: 2px;
    border-radius: 2px;
    top: var(--debut, 0);
  }
  .ltds-rail-fond {
    height: calc(var(--fin, 0px) - var(--debut, 0px));
    background: color-mix(in srgb, var(--color-text) 16%, transparent);
  }
  .ltds-rail-plein {
    height: max(0px, calc(var(--pos, 0px) - var(--debut, 0px)));
    background: var(--color-accent-700);
  }
  .ltds-rail-point {
    --w: 0;
    position: absolute;
    left: 0;
    top: calc(var(--y, 0px) - 9px);
    width: 18px;
    height: 18px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--color-text) 28%, transparent);
    background: var(--color-bg);
    transform: scale(calc(0.72 + 0.28 * var(--w)));
  }
  .ltds-rail-point.is-passe {
    border-color: var(--color-accent-700);
    background: var(--color-accent-700);
  }
  .ltds-rail-point {
    box-shadow: 0 0 0 calc(5px * var(--w)) color-mix(in srgb, var(--color-accent-700) 18%, transparent);
  }
  .ltds-rail-point:not(.is-passe) {
    border-color: color-mix(in srgb, var(--color-accent-700) calc(var(--w) * 100%), color-mix(in srgb, var(--color-text) 28%, transparent));
    background: color-mix(in srgb, var(--color-accent-700) calc(var(--w) * 100%), var(--color-bg));
  }
}

.ltds-footer-col,
a.ltds-footer-col {
  display: grid;
  gap: 10px;
  font-size: var(--t-ui);
  align-content: start;
}
.ltds-footer-heading,
a.ltds-footer-heading {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

/* Pied de page — reseaux sociaux. Pas de glyphes de marque : les noms
   ecrits se lisent aussi bien, restent nets a toute taille, et evitent de
   reproduire des logos qui ne nous appartiennent pas. Le premier lien, le
   reseau mis en avant, est le seul souligne. */
.ltds-footer-reseaux {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 6px;
}
.ltds-footer-reseau,
a.ltds-footer-reseau {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--t-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
  transition: color 0.2s;
}
.ltds-footer-reseau--phare,
a.ltds-footer-reseau--phare {
  font-weight: 800;
  color: var(--color-accent-700);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--color-accent-500);
}
/* Dans le pied de page clair, le rehaut vert clair du survol disparaitrait :
   on reprend le vert prevu pour les fonds clairs. */
.ltds-footer .ltds-hover-light:hover {
  color: var(--color-accent-700) !important;
}
.ltds-faq-question,
a.ltds-faq-question {
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--t-body);
  line-height: 1.35;
}
.ltds-faq-answer,
a.ltds-faq-answer {
  font-size: var(--t-small);
  line-height: 1.65;
  margin: 12px 0 0;
  max-width: 72ch;
}
.ltds-faq-item,
a.ltds-faq-item {
  background: var(--color-surface);
  border-radius: 18px;
  padding: 18px 22px;
}
.ltds-article-text,
a.ltds-article-text {
  font-size: var(--t-body);
  line-height: 1.7;
  margin: 18px 0 0;
}
.ltds-article-h2,
a.ltds-article-h2 {
  font-size: var(--t-h2-s);
  line-height: 1.12;
  letter-spacing: -0.025em;
  margin: 40px 0 0;
}
.ltds-bullet-item,
a.ltds-bullet-item {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  font-size: var(--t-body);
  line-height: 1.6;
}
.ltds-bullet,
a.ltds-bullet {
  color: var(--color-accent);
  font-weight: 800;
}
.ltds-card-title,
a.ltds-card-title {
  font-size: var(--t-h3);
  margin: 0;
}
.ltds-card,
a.ltds-card {
  background: var(--color-carte);
  border-radius: 22px;
  overflow: hidden;
  padding: 0 0 26px;
}
.ltds-container,
a.ltds-container {
  max-width: 1280px;
  margin: 0 auto;
}
.ltds-container-narrow,
a.ltds-container-narrow {
  max-width: 760px;
  margin: 0 auto;
}
.ltds-section,
a.ltds-section {
  padding: var(--gap-section) 24px;
}
.ltds-section-end,
a.ltds-section-end {
  padding: 0 24px var(--gap-section);
}
.ltds-card-img,
a.ltds-card-img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.ltds-model-note,
a.ltds-model-note {
  font-size: var(--t-small);
  line-height: 1.5;
  margin: 14px 0 0;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-accent-800);
}
.ltds-model-text,
a.ltds-model-text {
  font-size: var(--t-small);
  line-height: 1.6;
  margin: 12px 0 0;
}
.ltds-model-title,
a.ltds-model-title {
  font-size: var(--t-h3);
  margin: 0;
  color: var(--color-accent-900);
}
.ltds-model-card,
a.ltds-model-card {
  /* Blanc, et non le vert tres clair d'origine : un chapitre sur deux est
     maintenant teinte, et sur ce fond-la des cartes vert pale disparaissaient
     presque. Le blanc les detache des deux cotes. */
  background: var(--color-carte);
  border-radius: 22px;
  padding: 28px 26px;
}

/* Modeles economiques : la grille s'adapte au nombre de cartes. Quand l'une
   d'elles est mise en avant et qu'il n'y en a que deux, elle prend aussi un
   peu plus de place — une carte « recommandee » de la meme taille que les
   autres ne se remarque qu'a moitie. */
.ltds-modeles-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--gap-cartes);
  margin-top: var(--gap-titre);
  align-items: start;
}
@media (min-width: 900px) {
  .ltds-modeles-grille--avant { grid-template-columns: 1.18fr 1fr; }
}

/* Cartes a pictogramme : une idee par carte, sans photo. */
.ltds-atouts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: var(--gap-cartes);
  margin-top: var(--gap-titre);
}
.ltds-atout {
  background: var(--color-carte);
  border-radius: 20px;
  padding: 26px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ltds-atout-picto {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: var(--color-accent-200);
  color: var(--color-accent-800);
  margin-bottom: 4px;
}
.ltds-atout-picto svg { display: block; }
.ltds-atout-titre {
  font-size: var(--t-h3);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
}
.ltds-atout-texte {
  font-size: var(--t-small);
  line-height: 1.6;
  margin: 0;
  opacity: 0.86;
}
.ltds-profile-pill,
a.ltds-profile-pill {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--t-ui);
  padding: 11px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
  color: #fff;
  white-space: nowrap;
}
.ltds-footer-legal,
a.ltds-footer-legal {
  display: flex;
  gap: 24px;
}
.ltds-footer-bottom,
a.ltds-footer-bottom {
  max-width: 1280px;
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  font-size: var(--t-label);
}
.ltds-footer-sep,
a.ltds-footer-sep {
  border-top: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
}
.ltds-solution-card,
a.ltds-solution-card {
  flex: 0 0 clamp(260px, 26vw, 340px);
  background: var(--color-surface);
  border-radius: 22px;
  overflow: hidden;
  padding: 0 0 26px;
}
.ltds-menu,
a.ltds-menu {
  display: none;
  max-width: 1280px;
  margin: 10px auto 0;
  background: var(--color-navbar);
  border-radius: 22px;
  box-shadow: 0 18px 44px -28px rgba(20,18,17,0.5);
  padding: 10px;
  flex-direction: column;
}
.ltds-solution-media,
a.ltds-solution-media {
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
.ltds-solution-title,
a.ltds-solution-title {
  font-size: var(--t-h3);
  margin: 0;
}
.ltds-solution-img,
a.ltds-solution-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.16);
  will-change: transform;
}
.ltds-nav,
a.ltds-nav {
  display: flex;
  margin: 0 auto;
  flex-wrap: nowrap;
  white-space: nowrap;
  font-weight: 600;
  font-family: var(--font-heading);
  color: var(--color-accent-800);
}
.ltds-header-cta,
a.ltds-header-cta {
  flex-shrink: 0;
  padding: 12px 20px;
  font-size: var(--t-ui);
  white-space: nowrap;
}
.ltds-header-actions,
a.ltds-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex-shrink: 0;
}
.ltds-footer-grid,
a.ltds-footer-grid {
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(40px, 5vw, 72px) 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 36px;
}
.ltds-footer,
a.ltds-footer {
  background: var(--color-surface);
  color: var(--color-text);
  border-top: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
}
.ltds-header,
a.ltds-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  padding: clamp(12px, 1.6vw, 20px) clamp(12px, 2vw, 28px);
  transition: transform 0.4s cubic-bezier(.22,1,.36,1);
}
.ltds-footer-logo,
a.ltds-footer-logo {
  height: 40px;
  width: auto;
  /* La plaque claire sous le logo n'avait de sens que sur l'ancien pied de
     page sombre : elle dessinait un rectangle blanc autour du logo. Le
     fond etant desormais clair, le logo transparent s'y pose directement. */
}
.ltds-footer-about,
a.ltds-footer-about {
  font-size: var(--t-small);
  line-height: 1.6;
  margin: 18px 0 0;
  max-width: 32ch;
}
.ltds-btn-dark,
a.ltds-btn-dark {
  background: var(--color-accent-900);
  color: #fff;
  padding: 12px 18px;
  font-size: var(--t-ui);
  white-space: nowrap;
}
.ltds-meta-muted,
a.ltds-meta-muted {
  color: var(--color-text);
  opacity: 0.45;
}
.ltds-table-value,
a.ltds-table-value {
  font-family: var(--font-heading);
  font-weight: 700;
  white-space: nowrap;
}
.ltds-zoom-img,
a.ltds-zoom-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(.22,1,.36,1);
}
.ltds-burger,
a.ltds-burger {
  display: none;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  background: var(--color-accent-200);
  color: var(--color-accent-800);
  cursor: pointer;
  font-size: var(--t-body);
  line-height: 1;
  place-items: center;
}
.ltds-navbar,
a.ltds-navbar {
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px 14px 12px 22px;
  display: flex;
  align-items: center;
  background: var(--color-navbar);
  border-radius: 22px;
  box-shadow: 0 18px 44px -28px rgba(20,18,17,0.5);
}
.ltds-marquee-group,
a.ltds-marquee-group {
  display: flex;
  gap: 20px;
  padding-right: 20px;
  align-items: stretch;
}
.ltds-table-row,
a.ltds-table-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  padding: 14px 20px;
  border-top: 1px solid rgba(20,18,17,0.08);
  font-size: var(--t-ui);
}
.ltds-project-media,
a.ltds-project-media {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--color-surface);
}
.ltds-related-title,
a.ltds-related-title {
  font-size: var(--t-h3);
  line-height: 1.2;
  margin: 8px 0 0;
  transition: color 0.2s;
}
.ltds-related-media,
a.ltds-related-media {
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--color-surface);
}
.ltds-cover-img,
a.ltds-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ltds-kicker,
a.ltds-kicker {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-700);
  margin-top: 14px;
}
.ltds-project-place,
a.ltds-project-place {
  font-size: var(--t-label);
  opacity: 0.65;
}
.ltds-project-title,
a.ltds-project-title {
  font-size: var(--t-h3);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 8px 0 0;
}
.ltds-project-stats,
a.ltds-project-stats {
  display: flex;
  gap: 20px;
  margin-top: 14px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--t-label);
}

/* Tuiles « Vous etes ? » : libelle de fin bien visible. */
.ltds-tuile-cta {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--t-ui);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent-700);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-top: 6px;
}

/* Bandeau vert : un temps d'arret avant les realisations. */
.ltds-rupture {
  margin-top: var(--gap-titre);
  background: var(--color-accent-fond);
  color: var(--color-bg);
  border-radius: 28px;
  padding: clamp(40px, 4.5vw, 68px) clamp(28px, 3.5vw, 56px);
  display: flex;
  flex-wrap: wrap;
  gap: 28px 48px;
  align-items: center;
  justify-content: space-between;
}
/* Le bloc de texte occupe la place, le bouton garde la sienne.
   Une largeur en « ch » serait calculee sur la taille du paragraphe,
   pas sur celle du grand titre : on la pose en pixels. */
.ltds-rupture-texte {
  flex: 1 1 520px;
  max-width: 660px;
}
.ltds-rupture-titre {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--t-h2);
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0;
  text-wrap: pretty;
}
.ltds-rupture-soustitre {
  font-size: var(--t-lead);
  line-height: 1.6;
  margin: 16px 0 0;
  opacity: 0.92;
  text-wrap: pretty;
}
.ltds-rupture-bouton {
  padding: 19px 30px;
  font-size: var(--t-body);
  white-space: nowrap;
  flex-shrink: 0;
  /* Le fond clair etait pose en style en ligne dans l'ancienne version :
     il est desormais porte par la classe. */
  background: var(--color-bg);
  color: var(--color-text);
}

/* Certifications : trois logos cliquables, intitule en gris clair dessous. */
.ltds-certifs {
  list-style: none;
  margin: clamp(24px, 3vw, 36px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: clamp(16px, 2vw, 28px);
  max-width: 900px;
}
.ltds-certif-lien {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: inherit;
}
.ltds-certif-cadre {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 132px;
  padding: 22px 24px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 1px 0 rgba(20,18,17,0.06);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.ltds-certif-img {
  max-width: 100%;
  max-height: 84px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
/* Avis clients. La citation porte le poids : texte plus grand que dans les
   autres cartes, guillemet ouvrant en reperage, et l'identite reduite a une
   ligne en pied. Les trois cartes gardent la meme hauteur pour que le pied
   s'aligne d'une carte a l'autre. */
.ltds-avis {
  display: flex;
  flex-direction: column;
  margin: 0;
  background: var(--color-surface);
  border-radius: 22px;
  padding: clamp(26px, 3vw, 34px) clamp(24px, 2.6vw, 30px);
  position: relative;
}
.ltds-avis::before {
  content: "\201C";
  display: block;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 52px;
  line-height: 0.7;
  height: 26px;
  color: var(--color-accent-700);
  opacity: 0.32;
}
.ltds-avis-texte {
  flex: 1;
  font-size: var(--t-body);
  line-height: 1.6;
  margin: 16px 0 0;
  text-wrap: pretty;
}
.ltds-avis-pied {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(20px, 2.4vw, 26px);
  padding-top: clamp(16px, 2vw, 20px);
  border-top: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
}
.ltds-avis-initiale {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--color-accent-200);
  color: var(--color-accent-800);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--t-ui);
}
.ltds-avis-qui {
  display: grid;
  font-size: var(--t-ui);
  line-height: 1.35;
}
.ltds-avis-role {
  opacity: 0.68;
}
/* Guillemet fermant en pendant de l'ouvrant, comme sur la carte du mot du
   dirigeant. Plus petit et plus pale que lui : la carte est courte, et le
   pied de carte passe juste a cote. */
.ltds-avis::after {
  content: "\201D";
  position: absolute;
  right: clamp(16px, 1.8vw, 22px);
  bottom: clamp(2px, 0.6vw, 8px);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 44px;
  line-height: 1;
  color: var(--color-accent-700);
  opacity: 0.18;
  pointer-events: none;
}

/* La derniere carte d'une page (« Parlons de votre projet ») n'avait aucune
   marge haute : son bord venait se coller a la limite entre deux bandes de
   couleur, ce qui se lisait comme un defaut de calage. */
.ltds-section-cta {
  padding-top: clamp(40px, 5vw, 72px);
}


/* Bandeau de logos : une seule ligne qui defile d'elle-meme. La piste
   rogne, la bande interieure fait deux fois la largeur des logos — la
   liste est ecrite deux fois — et glisse de la moitie exacte de sa
   largeur. Arrivee au bout, elle revient a zero sur une image identique :
   la boucle ne se voit pas. */
/* Bandeau des marques partenaires.

   Il tournait sur sa propre mecanique : une piste large de 3 900 px
   deplacee par transformation, sous un cadre de 342 px sur telephone. On y
   voyait deux logos et demi, toujours coupes par les bords, et rien ne
   permettait d'arreter le defilement pour en lire un. C'est le meme defaut
   que les bandeaux des solutions et des etapes avaient avant d'etre
   unifies ; il rejoint donc le meme composant.

   Sur un ecran a souris, rien ne change a l'oeil : la bande avance seule et
   s'arrete quand on l'approche. Au doigt, elle se fait glisser, logo par
   logo. Pas de fleches ici : il n'y a rien a lire, seulement a regarder. */
.ltds-logos-piste {
  margin: clamp(24px, 3vw, 36px) 0 0;
  /* L'ecart final est porte par la copie, pas par la piste : chaque liste
     mesure alors exactement la moitie, et la boucle se referme sans saut. */
  gap: 0;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.ltds-logos {
  list-style: none;
  margin: 0;
  padding: 0 clamp(12px, 1.4vw, 18px) 0 0;
  display: flex;
  gap: clamp(12px, 1.4vw, 18px);
}
.ltds-logo {
  flex: 0 0 clamp(126px, 12vw, 160px);
}
/* Au doigt, le degrade des deux cotes effacerait le bord du logo qu'on
   vient de caler. Il ne reste qu'a droite, ou il dit qu'il y en a d'autres. */
@media (max-width: 760px), (hover: none) {
  .ltds-logos-piste {
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 90%, transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 90%, transparent 100%);
  }
}
.ltds-logo-cadre {
  display: grid;
  place-items: center;
  aspect-ratio: 2 / 1;
  padding: 10px 14px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(20,18,17,0.06);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.ltds-logo-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
a.ltds-logo-cadre:hover,
a.ltds-logo-cadre:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 16px 28px -18px rgba(20,18,17,0.45);
}


.ltds-certif-titre {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--t-label);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.35;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
  transition: color 0.2s;
}
/* Le logo se souleve au survol, comme les autres cartes du site. */
a.ltds-certif-lien:hover .ltds-certif-cadre,
a.ltds-certif-lien:focus-visible .ltds-certif-cadre {
  transform: translateY(-6px);
  box-shadow: 0 22px 38px -22px rgba(20,18,17,0.45);
}
a.ltds-certif-lien:hover .ltds-certif-titre,
a.ltds-certif-lien:focus-visible .ltds-certif-titre {
  color: var(--color-accent-700);
}

/* Donnees d'une realisation : une par ligne, discrete, en vert. */
.ltds-project-data {
  list-style: none;
  margin: 12px 0 0;
  padding: 11px 0 0;
  border-top: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
  display: grid;
  gap: 5px;
}
.ltds-project-data-item {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 7px;
  min-width: 0;
}
/* L'intitule reste en maigre, la valeur seule est mise en avant. */
.ltds-project-data-label {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-label);
  line-height: 1.3;
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
}
.ltds-project-data-icone {
  color: var(--color-accent);
  display: block;
  flex: none;
  align-self: center;
}
.ltds-project-data-icone svg { display: block; }
.ltds-project-data-valeur {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--t-small);
  line-height: 1.3;
  color: var(--color-accent-700);
}
.ltds-tag,
a.ltds-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--color-accent-200);
  color: var(--color-accent-800);
  border-radius: 999px;
  padding: 8px 14px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--t-label);
}
.ltds-bg-img,
a.ltds-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ltds-ref-card,
a.ltds-ref-card {
  scroll-snap-align: start;
  flex: 0 0 clamp(260px, 30vw, 380px);
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--color-neutral-800);
}

/* Dernière carte du bandeau des réalisations : la suite, plutôt que le vide.

   Elle garde le fond sombre des cartes photo — c'est une carte parmi les
   autres, pas une pièce rapportée — et son texte passe donc en clair. La
   première version posait un fond clair ici, mais la règle generale des
   cartes vient plus bas dans la feuille et reprenait la main : on se
   retrouvait avec du texte sombre sur fond sombre, lisible seulement au
   survol. D'où la place de ce bloc, juste après cette règle generale. */
.ltds-ref-card--suite,
a.ltds-ref-card--suite {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 30px 28px;
  background: var(--color-neutral-800);
  border: 1px solid rgba(243, 242, 242, 0.16);
  color: var(--color-bg);
  text-decoration: none;
  transition: border-color 0.25s, transform 0.25s, background 0.25s;
}
a.ltds-ref-card--suite:hover,
a.ltds-ref-card--suite:focus-visible {
  border-color: var(--color-accent-400);
  transform: translateY(-4px);
  color: var(--color-bg);
}
.ltds-ref-suite-fleche {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--color-accent-600, #2f7a22);
  color: #fff;
  transition: transform 0.25s;
}
a.ltds-ref-card--suite:hover .ltds-ref-suite-fleche { transform: translateX(4px); }
.ltds-ref-suite-titre {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: var(--t-h3);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-bg);
}
.ltds-ref-suite-texte {
  font-size: var(--t-small);
  line-height: 1.5;
  color: rgba(243, 242, 242, 0.76);
}
.ltds-ref-suite-bouton {
  margin-top: 4px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--t-ui);
  color: var(--color-accent-400);
}

.ltds-ref-img,
a.ltds-ref-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(.22,1,.36,1);
}
.ltds-ref-overlay,
a.ltds-ref-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,18,17,0.62) 0%, rgba(20,18,17,0.12) 38%, rgba(20,18,17,0.82) 100%);
}
.ltds-ref-content,
a.ltds-ref-content {
  position: absolute;
  inset: 0;
  padding: 24px;
  display: flex;
  flex-direction: column;
  color: #fff;
}
.ltds-ref-title,
a.ltds-ref-title {
  font-size: var(--t-h3);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
  color: #fff;
  max-width: 15ch;
}
.ltds-ref-stats,
a.ltds-ref-stats {
  margin-top: auto;
  display: grid;
  gap: 12px;
}
.ltds-ref-label,
a.ltds-ref-label {
  font-size: var(--t-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.8;
}
.ltds-ref-value,
a.ltds-ref-value {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--t-h2-s);
  line-height: 1.1;
}
.ltds-ref-footer,
a.ltds-ref-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.ltds-ref-place,
a.ltds-ref-place {
  font-size: var(--t-label);
  opacity: 0.85;
}
.ltds-read-more,
a.ltds-read-more {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--t-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}


/* 7. États de survol et interactions ======================================= */
/* Remplacent les attributs style-hover et les écouteurs mouseenter/mouseleave. */

.ltds-hover-light:hover  { color: var(--color-accent-400) !important; }
.ltds-hover-tint:hover   { background: var(--color-accent-200) !important; }
.ltds-hover-accent:hover { color: var(--color-accent) !important; }
.ltds-hover-invert:hover { background: var(--color-text) !important; border-color: var(--color-text) !important; color: var(--color-bg) !important; }
.ltds-hover-white:hover  { background: #fff !important; color: var(--color-text) !important; }

/* Les quatre arguments de l'accueil. Le pictogramme etait colle a gauche du
   titre : il ne restait qu'une colonne etroite au texte, et « Un
   accompagnement de bout en bout » se coupait en trois lignes bancales. Le
   pictogramme passe donc au-dessus, le titre dispose de toute la carte. */
.ltds-argument-tete {
  display: block;
}
.ltds-argument-picto {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--color-accent-200);
  color: var(--color-accent-800);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.ltds-argument-titre {
  font-size: var(--t-h3);
  line-height: 1.15;
  margin: 16px 0 0;
  text-wrap: balance;
}

/* Accueil — tuiles « Vous êtes ? » : la carte se souleve, son ombre s'etale. */
#profils a[data-tile] {
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
#profils a[data-tile]:hover,
#profils a[data-tile]:focus-visible {
  transform: translateY(-8px);
  box-shadow: 0 26px 44px -24px rgba(20,18,17,0.5);
}
#profils a[data-tile]:active { transform: translateY(-2px); }
/* La carte se souleve, son texte ne change pas de couleur. */
#profils a[data-tile]:hover,
#profils a[data-tile]:focus-visible { color: var(--color-text); }

/* Accueil — carrousel des réalisations */
[data-bande-item]:hover .ltds-ref-img { transform: scale(1.07); }

/* Cartes d'articles */
[data-article]:hover [data-article-title],
[data-article]:focus-visible [data-article-title] { color: var(--color-accent-700); }

/* Réalisations — zoom de l'image au survol */
[data-project]:hover [data-projimg] { transform: scale(1.06); }

/* Boutons : au survol, le fond et le texte echangent leur couleur.
   Un bouton vert a texte clair devient clair a texte vert, et inversement.
   Le contour garde la couleur d'origine pour que le bouton reste lisible
   sur tous les fonds, y compris les photos. */
.btn {
  transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}

/* Neutralise d'abord la regle generale des liens (a:hover), qui repeindrait
   sinon le libelle de tous les boutons en vert fonce. Les variantes
   ci-dessous reposent leur propre couleur par-dessus. */
a.btn:hover,
a.btn:focus-visible { color: var(--color-text); }

/* Vert plein -> clair a texte vert.
   Chaque variante est ecrite « .btn.xxx » pour passer devant la regle
   generale des liens ci-dessus, quelle que soit la balise utilisee. */
.btn.btn-primary:hover,
.btn.btn-primary:focus-visible {
  background: var(--color-bg);
  color: var(--color-accent-700);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}

/* Vert fonce plein (fond pose en style en ligne) -> blanc a texte vert fonce. */
.btn.ltds-btn-fonce:hover,
.btn.ltds-btn-fonce:focus-visible {
  background: #fff !important;
  color: var(--color-accent-900) !important;
  box-shadow: inset 0 0 0 1px var(--color-accent-900);
}

/* Clair sur fond colore -> vert plein a texte blanc. */
.btn.ltds-btn-clair:hover,
.btn.ltds-btn-clair:focus-visible {
  background: var(--color-accent-800) !important;
  color: #fff !important;
}

/* Bouton translucide pose sur une photo -> blanc a texte sombre. */
.btn.ltds-hover-white:hover,
.btn.ltds-hover-white:focus-visible {
  background: #fff !important;
  color: var(--color-text) !important;
}

/* Bouton a contour simple -> sombre a texte clair. */
.btn.btn-secondary:hover,
.btn.btn-secondary:focus-visible {
  background: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-bg);
}

/* Liens « Lire l'article », « Voir » : la fleche avance. */
.ltds-read-more {
  transition: color 0.2s, transform 0.2s var(--ease-out);
}
[data-article]:hover .ltds-read-more,
[data-article]:focus-visible .ltds-read-more,
.ltds-read-more:hover {
  color: var(--color-accent-700);
  transform: translateX(4px);
}

/* Tuiles « Vous êtes ? » : le libelle de fin avance avec le survol. */
#profils a[data-tile] > span:last-child { transition: transform 0.25s var(--ease-out); }
#profils a[data-tile]:hover > span:last-child,
#profils a[data-tile]:focus-visible > span:last-child { transform: translateX(5px); }

/* Filtres de la page Réalisations. */
[data-filters] button { transition: background 0.2s, color 0.2s, transform 0.2s; }
[data-filters] button:hover,
[data-filters] button:focus-visible { background: var(--color-accent-200) !important; }
[data-filters] button[data-filter="tous"]:hover,
[data-filters] button[aria-pressed="true"]:hover { background: var(--color-accent-800) !important; }

/* Pagination des articles. */
.ltds-site .nav-links a.page-numbers {
  transition: background 0.2s, color 0.2s, transform 0.2s;
}
.ltds-site .nav-links a.page-numbers:hover,
.ltds-site .nav-links a.page-numbers:focus-visible {
  background: var(--color-accent-700);
  color: #fff;
}


/* 8. Responsive et préférences de mouvement ================================ */

/* Lisibilité sur téléphone.

   Trois réglages, tous mesurés sur l'écran plutôt que décidés au jugé :

   — Les étiquettes (lieux des réalisations, durées de lecture, mentions du
     pied de page) s'affichaient à 12 px. Sur l'accueil, 35 textes étaient
     dans ce cas. 12 px tient sur un écran de bureau regardé à 60 cm, pas
     sur un téléphone tenu à bout de bras.

   — Les champs de formulaire et la navigation utilisaient 15 px. En dessous
     de 16 px, iOS zoome la page dès qu'on touche un champ, et ne dézoome
     pas : le visiteur se retrouve coincé dans une page trop large.

   — Les grands titres gardaient un plancher de 38 px. Sur 320 px de large,
     « L'électricité que vous produisez… » occupait six lignes et poussait
     tout le reste sous la ligne de flottaison. */
@media (max-width: 760px) {
  :root {
    --t-label: 13px;
    --t-ui:    16px;
  }
}

/* Les quatre profils en tête de page « Vous êtes » tiennent sur une ligne
   au bureau. Sur 390 px, à 16 px de texte et 18 px de marge interne, ils en
   prennent trois et repoussent le titre sous la ligne de flottaison : on
   arrive sur la page sans voir de quoi elle parle. Resserrés, ils tiennent
   sur deux lignes sans devenir des cibles trop petites — 38 px de haut. */
@media (max-width: 760px) {
  .ltds-profile-pill,
  a.ltds-profile-pill {
    font-size: 14px;
    padding: 9px 13px;
  }
}

@media (max-width: 420px) {
  :root {
    --t-h1:      clamp(30px, 8.6vw, 38px);
    --t-h1-page: clamp(28px, 8vw, 34px);
    --t-h2:      clamp(25px, 7.2vw, 30px);
    --t-h2-s:    clamp(21px, 6vw, 24px);
  }
}

@media (max-width: 1240px) {
  [data-navbar] { gap: 14px; }
  [data-nav] { gap: 15px; font-size: var(--t-label); }
  [data-navbar] > a:first-child img { height: 32px !important; }
}

@media (max-width: 1080px) {
  [data-nav] { display: none !important; }
  [data-navbar] > a:first-child img { height: 34px !important; }
  [data-burger] { display: grid !important; }
  [data-menu][data-open] { display: flex !important; }
}

@media (max-width: 1000px) {
  [data-layout] { grid-template-columns: 1fr !important; }
  [data-aside] { position: static !important; }
}

@media (max-width: 760px) {
  [data-etude-intro] { position: static !important; }
}

/* Correctif : bandeau de chiffres cles (accueil). La maquette forcait flex-wrap: nowrap,
   ce qui ecrasait les 5 colonnes sur petit ecran (chiffres et libelles superposes). */
@media (max-width: 900px) {
  [data-stats] {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: start !important;
    row-gap: clamp(20px, 4vw, 32px) !important;
    column-gap: clamp(16px, 3vw, 32px) !important;
  }
}
/* Chaque chiffre est centre dans sa colonne : aligne a gauche, le dernier
   laissait un grand vide a droite et la rangee paraissait decalee. */
[data-stats] > div { text-align: center; }

/* Quatre chiffres se rangent mieux en deux lignes de deux qu'en 3 + 1 : le
   nombre de colonnes suit donc le nombre de chiffres, porte par data-stats. */
@media (max-width: 900px) {
  [data-stats="2"],
  [data-stats="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 620px) {
  [data-stats] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  /* Le dernier chiffre ne prend toute la largeur que s'il est seul sur sa
     ligne — vrai pour 5 chiffres, faux pour 4. */
  [data-stats] > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
  /* Sur deux colonnes, « 29,5 MWc » ne tient pas sur une ligne : la maquette
     interdisait le retour a la ligne, ce qui le faisait deborder de sa
     colonne. On le laisse passer sous le nombre. */
  [data-stats] > div > div:first-child {
    white-space: normal !important;
    font-size: clamp(28px, 8.5vw, 40px) !important;
  }
}

/* Correctif : grille des articles (Ressources). L'article mis en avant portait
   grid-column: span 2 ; sous ~760 px la grille ne tient qu'une colonne, la deuxieme
   etait donc creee implicitement hors de l'ecran et les cartes se retrouvaient coupees. */
@media (max-width: 760px) {
  [data-articles] { grid-template-columns: minmax(0, 1fr) !important; }
  [data-articles] > * { grid-column: auto !important; }
}

/* Correctif maquette : sous ~460 px, logo + bouton « Étude gratuite » + burger dépassaient
   de la barre et le bouton menu sortait de l'écran (inaccessible sur smartphone). */
@media (max-width: 520px) {
  [data-navbar] { gap: 10px; padding-left: 16px !important; padding-right: 12px !important; }
  [data-navbar] > a:first-child img { height: 28px !important; }
  [data-actions] { gap: 8px !important; }
  [data-actions] > a.btn { padding: 11px 14px !important; font-size: 13px !important; }
  [data-burger] { margin-left: 0 !important; }
}
@media (max-width: 374px) {
  [data-navbar] { gap: 8px; padding-left: 14px !important; padding-right: 10px !important; }
  [data-navbar] > a:first-child img { height: 24px !important; }
  [data-actions] > a.btn { padding: 10px 12px !important; font-size: 12.5px !important; }
}
@media (max-width: 340px) {
  [data-navbar] { gap: 6px; padding-left: 12px !important; padding-right: 8px !important; }
  [data-navbar] > a:first-child img { height: 20px !important; }
  [data-actions] { gap: 6px !important; }
  [data-actions] > a.btn { padding: 9px 10px !important; font-size: 12px !important; }
  [data-burger] { width: 38px !important; height: 38px !important; }
}

@media (prefers-reduced-motion: reduce) {
  a.ltds-certif-lien:hover .ltds-certif-cadre,
  #profils a[data-tile]:hover,
  #profils a[data-tile]:focus-visible,
  #profils a[data-tile]:hover > span:last-child,
  [data-article]:hover .ltds-read-more,
  .ltds-read-more:hover { transform: none; }

}

/* 9. Contenu redige dans l'editeur WordPress =============================== */
/* Reprend exactement la typographie des articles de la maquette, appliquee
   aux balises brutes produites par l'editeur (p, h2, h3, ul, ol, blockquote). */

/* Photo en tete d'article (reprise de la maquette : bandeau 21/9 arrondi). */
.ltds-article-img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border-radius: 24px;
}

.ltds-article-body > p {
  font-size: var(--t-body);
  line-height: 1.7;
  margin: 18px 0 0;
}
.ltds-article-body > h2 {
  font-size: var(--t-h2-s);
  line-height: 1.12;
  letter-spacing: -0.025em;
  margin: 40px 0 0;
}
.ltds-article-body > h3 {
  font-size: var(--t-h3);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 30px 0 0;
}
.ltds-article-body > ul,
.ltds-article-body > ol {
  margin: 18px 0 0;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
/* La puce etait posee en grille (20px + 1fr). Une puce qui melange du gras et
   du texte — « <strong>Base legale</strong> : ... » — produisait alors un
   troisieme element de grille, renvoye dans la colonne de 20 px : le texte s'y
   cassait lettre par lettre. Un bloc avec puce en position absolue accepte
   n'importe quel melange d'elements en ligne. */
.ltds-article-body > ul > li,
.ltds-article-body > ol > li {
  display: block;
  position: relative;
  padding-left: 32px;
  font-size: var(--t-body);
  line-height: 1.6;
}
.ltds-article-body > ul > li::before,
.ltds-article-body > ol > li::before {
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  text-align: left;
}
.ltds-article-body > ul > li::before {
  content: '\00B7';
  color: var(--color-accent);
  font-weight: 800;
}
.ltds-article-body > ol {
  counter-reset: ltds-liste;
}
.ltds-article-body > ol > li::before {
  counter-increment: ltds-liste;
  content: counter(ltds-liste) '.';
  color: var(--color-accent);
  font-weight: 800;
}
.ltds-article-body > blockquote {
  margin: 30px 0 0;
  background: var(--color-accent-100);
  border-radius: 18px;
  padding: 22px 24px;
  color: var(--color-accent-900);
  font-size: var(--t-small);
  line-height: 1.6;
}
.ltds-article-body > blockquote > p { margin: 0; }
.ltds-article-body > figure,
.ltds-article-body > img {
  margin: 30px 0 0;
  max-width: 100%;
  height: auto;
  border-radius: 18px;
}
.ltds-article-body > figure img {
  max-width: 100%;
  height: auto;
  border-radius: 18px;
  display: block;
}
.ltds-article-body > figure figcaption {
  font-size: var(--t-small);
  opacity: 0.7;
  margin-top: 10px;
}
.ltds-article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 26px 0 0;
  font-size: var(--t-small);
  background: var(--color-surface);
  border-radius: 18px;
  overflow: hidden;
}
.ltds-article-body table th,
.ltds-article-body table td {
  padding: 14px 8px;
  text-align: left;
}
.ltds-article-body table th:first-child,
.ltds-article-body table td:first-child { padding-left: 20px; }
.ltds-article-body table th:last-child,
.ltds-article-body table td:last-child { padding-right: 20px; }
.ltds-article-body table th { background: rgba(20,18,17,0.04); font-weight: 700; }
.ltds-article-body table tbody td { border-top: 1px solid rgba(20,18,17,0.08); }
.ltds-article-body table th:last-child,
.ltds-article-body table td:last-child {
  text-align: right;
  font-family: var(--font-heading);
  font-weight: 700;
  white-space: nowrap;
  width: 1%;
}
.ltds-article-body a {
  color: var(--color-accent-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ltds-article-body > blockquote a { color: var(--color-accent-800); }

/* Blocs de l'editeur : ramener les styles de WordPress a ceux de la maquette. */
.ltds-article-body > blockquote.wp-block-quote {
  border: 0;
  font-style: normal;
  quotes: none;
}
.ltds-article-body > blockquote.wp-block-quote cite {
  display: block;
  margin-top: 10px;
  font-size: var(--t-small);
  font-style: normal;
  opacity: 0.75;
}
.ltds-article-body figure.wp-block-table { overflow: visible; }
.ltds-article-body .wp-block-buttons { margin: 30px 0 0; }
.ltds-article-body .wp-block-button__link {
  background: var(--color-accent-900);
  color: #fff;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--t-small);
  padding: 15px 22px;
}
.ltds-article-body > hr.wp-block-separator {
  margin: 36px 0 0;
  border: 0;
  border-top: 1px solid rgba(20,18,17,0.14);
}
.ltds-article-body .wp-block-embed { margin: 30px 0 0; }
.ltds-article-body .wp-block-embed iframe { max-width: 100%; border-radius: 18px; }

/* Pagination des listes d'articles */
.ltds-site .navigation.pagination { margin-top: 8px; }
.ltds-site .nav-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ltds-site .nav-links .page-numbers {
  display: grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--t-ui);
}
.ltds-site .nav-links .page-numbers.current {
  background: var(--color-accent-700);
  color: #fff;
}
.screen-reader-text,
.ltds-site .screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}


/* 9. Sections des pages « Vous etes » ======================================= */

/* Encart sur fond sombre — une carte, pas une bande pleine largeur : le bloc
   « Notre accompagnement » est deja une bande sombre, et deux bandes sombres
   qui se suivent alourdissent la page. */
.ltds-encart {
  background: var(--color-text);
  color: var(--color-bg);
  border-radius: 28px;
  padding: clamp(32px, 4vw, 56px);
}
/* Carte sombre en mode « message » : l'intitule et la signature tiennent
   la colonne de gauche, le propos occupe la droite. Avant, le texte etait
   borne a 56ch dans une carte pleine largeur et laissait la moitie vide. */
.ltds-encart--message {
  position: relative;
  overflow: hidden;
}
/* Guillemet ouvrant en filigrane, assez grand pour tenir lieu d'ornement
   sans jamais genter la lecture : il est derriere le texte. */
.ltds-encart--message::before,
.ltds-encart--message::after {
  position: absolute;
  /* Cale sur la hauteur de capitale plutot que sur la boite du glyphe :
     un guillemet ouvrant est suspendu tres haut dans son cadratin, et la
     moitie passait au-dessus de la carte, rognee par overflow: hidden. */
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(120px, 13vw, 190px);
  line-height: 0.78;
  color: var(--color-accent-400);
  /* Assez pour se deviner, pas assez pour disputer la lecture au texte. */
  opacity: 0.13;
  pointer-events: none;
}
/* En diagonale : l'ouvrant ouvre la carte en haut a gauche, le fermant la
   ferme en bas a droite. Le coin superieur gauche est libre, la colonne de
   gauche ne commence qu'a mi-hauteur. */
.ltds-encart--message::before {
  content: "\201C";
  top: clamp(12px, 1.6vw, 22px);
  left: clamp(18px, 2.4vw, 36px);
}
.ltds-encart--message::after {
  content: "\201D";
  bottom: clamp(4px, 1vw, 16px);
  right: clamp(20px, 3vw, 44px);
}
.ltds-message-grille {
  position: relative;
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.ltds-message-titre {
  font-size: var(--t-h2);
  line-height: 1.08;
  letter-spacing: -0.028em;
  margin: 16px 0 0;
  max-width: 16ch;
  color: var(--color-bg);
  text-wrap: pretty;
}
.ltds-message-signature {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--t-ui);
  line-height: 1.45;
  margin: clamp(20px, 2.5vw, 30px) 0 0;
  padding-top: clamp(18px, 2vw, 24px);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  /* 24ch coupait « Vincent Marchand, président et fondateur » apres
     « president », alors que la colonne est deux fois plus large que la
     bride. La ligne tient entiere des 42ch, et se replie proprement
     au-dessous. */
  max-width: 42ch;
  text-wrap: pretty;
  color: var(--color-accent-400);
}
/* La fonction reste d'un seul tenant : la ligne se replie a la virgule,
   jamais au milieu de « president et fondateur ». */
.ltds-message-role { white-space: nowrap; }
.ltds-message-corps {
  max-width: 62ch;
}
.ltds-message-chapeau {
  font-size: var(--t-lead);
  line-height: 1.5;
  letter-spacing: -0.012em;
  margin: 0;
  color: var(--color-bg);
  text-wrap: pretty;
}
.ltds-message-texte {
  font-size: var(--t-body);
  line-height: 1.68;
  margin: 18px 0 0;
  opacity: 0.8;
  text-wrap: pretty;
}

/* Au-dela de 900 px la carte se partage en deux colonnes ; en dessous
   elle reste une seule colonne, titre puis texte. */
@media (min-width: 900px) {
  .ltds-message-grille {
    grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.4fr);
  }
  .ltds-message-tete {
    position: sticky;
    top: clamp(96px, 12vh, 140px);
  }
}

.ltds-encart-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}
.ltds-encart-titre {
  font-size: var(--t-h2-s);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 16px 0 0;
  max-width: 22ch;
  color: var(--color-bg);
  text-wrap: pretty;
}
.ltds-encart-texte {
  font-size: var(--t-small);
  line-height: 1.65;
  margin: 18px 0 0;
  max-width: 56ch;
  opacity: 0.82;
  text-wrap: pretty;
}
.ltds-encart-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 20px 24px;
}
.ltds-encart-point {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: var(--t-small);
  line-height: 1.5;
}
.ltds-encart-picto {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-accent-400);
}
.ltds-encart-note,
.ltds-precision {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: var(--t-small);
  line-height: 1.55;
  margin: clamp(28px, 3vw, 40px) 0 0;
}
/* Pas de largeur maximale ici : ces lignes de rappel sont courtes, et un
   retour a la ligne au tiers de la page passait pour un defaut de mise en
   page. C'est le conteneur qui borne la ligne. */
.ltds-precision {
  max-width: none;
}
.ltds-encart-note {
  /* Le filet separateur traverse toute la carte ; seul le texte reste
     borne a une longueur de ligne lisible. */
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  opacity: 0.74;
}
.ltds-encart-note-picto,
.ltds-precision-picto {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
}
.ltds-encart-note-picto {
  background: rgba(255, 255, 255, 0.12);
  color: var(--color-accent-400);
}

/* Phrase de clarification sous une grille de cartes. */
.ltds-precision {
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
}
.ltds-precision-picto {
  background: var(--color-accent-200);
  color: var(--color-accent-800);
}

/* Lien en bas d'une carte de modele economique. */
.ltds-model-lien,
a.ltds-model-lien {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--t-ui);
  letter-spacing: 0.02em;
  color: var(--color-accent-700);
  text-decoration: none;
}
.ltds-model-lien:hover,
a.ltds-model-lien:hover {
  color: var(--color-accent-900);
  text-decoration: underline;
}

/* Appel a l'action final. Tout etait empile dans une seule colonne : sur
   un grand ecran la moitie droite de la carte restait vide. Le propos tient
   la gauche, le bouton et les coordonnees la droite. */
/* Le cadre d'appel a l'action est deja vert : un mot vert par-dessus se lit
   moins bien que le blanc. Le rendu retire deja les marqueurs ; cette regle
   couvre le cas ou un accent arriverait par un autre chemin. */
.ltds-cta .ltds-accent { color: inherit; }

.ltds-cta {
  max-width: 1280px;
  margin: 0 auto;
  background: var(--color-accent-fond);
  color: #fff;
  border-radius: 28px;
  padding: clamp(32px, 4vw, 56px);
  display: grid;
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
}
.ltds-cta-titre {
  font-size: var(--t-h2);
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin: 0;
  max-width: 20ch;
  color: #fff;
  text-wrap: pretty;
}
.ltds-cta-texte {
  font-size: var(--t-body);
  line-height: 1.6;
  margin: 18px 0 0;
  max-width: 50ch;
  color: rgba(255, 255, 255, 0.92);
  text-wrap: pretty;
}
/* 2.59.0 — Le bouton et la mention forment un seul bloc : le bouton prend
   toute la largeur du bloc, la mention s'aligne dessous, a gauche, sur le
   meme bord. Avant, un style en ligne ramenait le bouton a la taille d'un
   bouton courant (16 px / 24 px) et le collait a gauche de sa colonne,
   pendant que la mention, alignee a droite, flottait en decale. */
.ltds-cta-action {
  display: grid;
  gap: 16px;
  justify-items: stretch;
  text-align: left;
  width: min(100%, 400px);
}
/* Le cadre fait toute la largeur de la page : un bouton de taille courante
   y paraissait perdu. Il prend donc la mesure du cadre. */
.ltds-cta-action .btn {
  padding: clamp(18px, 1.7vw, 24px) clamp(28px, 2.8vw, 40px);
  font-size: clamp(18px, 1.4vw, 20px);
  border-radius: 999px;
  transition: transform 0.2s, box-shadow 0.2s;
}
/* Sur telephone, le bouton fait toute la largeur du cadre : on resserre
   ses marges et son corps suit la largeur de l'ecran, pour que l'intitule
   tienne sur une ligne jusqu'a 360 px (mesure sur le site : « Demander
   votre etude gratuite » fait 243 px a 16 px, 213 px a 14 px). En dessous,
   il passe a la ligne et reste centre. */
.ltds-cta-action .btn { text-align: center; }
@media (max-width: 560px) {
  .ltds-cta-action .btn {
    padding: 19px 8px;
    font-size: clamp(14px, 3.9vw, 16px);
  }
}
/* Sur ordinateur, l'intitule ne se coupe jamais : la colonne du bouton
   garde au moins 340 px, ce qu'il faut a 18 px avec ses marges. Avant, a
   1024 px, il tombait sur deux lignes. */
@media (min-width: 860px) {
  .ltds-cta-action .btn {
    white-space: nowrap;
    padding-left: clamp(20px, 2vw, 40px);
    padding-right: clamp(20px, 2vw, 40px);
  }
}
.ltds-cta-action .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px -16px rgba(0, 0, 0, 0.45);
}
@media (min-width: 860px) {
  .ltds-cta {
    grid-template-columns: minmax(0, 1.25fr) minmax(340px, 0.75fr);
  }
  .ltds-cta-action {
    justify-self: end;
  }
}

/* Mention sous le bouton d'un appel a l'action. */
.ltds-cta-note {
  font-size: var(--t-small);
  line-height: 1.55;
  margin: 0;
  max-width: none;
  color: rgba(255, 255, 255, 0.82);
}

/* Temoignages. Ce bloc portait aussi trois classes qui n'existaient nulle
   part dans le balisage — vestiges d'une version anterieure de la carte :
   elles sont retirees. Les redefinitions qui, elles, s'appliquaient
   vraiment (elles arrivaient apres le bloc d'origine, plus haut dans la
   feuille, et l'emportaient) sont conservees ici a l'identique : rendu
   verifie inchange au pixel pres. */
.ltds-avis {
  background: var(--color-carte);
  padding: 26px 24px;
}
.ltds-avis-texte {
  font-size: var(--t-small);
  margin: 0;
}
.ltds-avis-role {
  opacity: 0.7;
}

/* Carte de solution sans photo : son texte s'aligne sur celui des cartes
   voisines plutot que de flotter en haut de la colonne. */
.ltds-card {
  display: flex;
  flex-direction: column;
}
.ltds-card-sans-image > .ltds-card-body {
  margin-top: auto;
  padding-top: 26px;
}


/* 10. Pages « Vous etes » ==================================================== */

/* Ces pages sont plus denses que l'accueil : on y enchaine des chapitres
   courts qu'on lit a la suite, alors que l'accueil sert de vitrine et
   supporte beaucoup plus d'air. Seuls les deux jetons d'espacement changent :
   la typographie, les cartes et les couleurs restent identiques. */
body.page-segment {
  --gap-section: clamp(60px, 5.6vw, 96px);
  --gap-titre:   clamp(20px, 1.8vw, 28px);
}

/* FAQ sur deux colonnes : dix questions en une seule colonne allongeaient
   la page pour rien. Une question ouverte pousse sa voisine de ligne, pas
   toute la liste. */
.ltds-faq-grille {
  display: grid;
  gap: 12px 24px;
  align-items: start;
}
@media (min-width: 860px) {
  /* Deux colonnes, pas trois : au-dela, les questions passent sur deux
     lignes et on perd ce qu'on avait gagne en hauteur. */
  .ltds-faq-grille { grid-template-columns: 1fr 1fr; }
}

/* Encart sombre : les points de droite se calent sur la hauteur du texte. */
.ltds-encart-grille {
  align-items: center;
}


/* 11. Sous-menu de navigation ============================================== */

/* « Vous etes ? » ouvre les quatre pages de profil sans repasser par
   l'accueil. Le panneau s'ouvre au survol sur ordinateur, au clic ou au
   clavier partout ailleurs. */
.ltds-nav-groupe {
  position: relative;
  display: flex;
  align-items: center;
}
.ltds-nav-chevron {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 6px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  vertical-align: middle;
  transition: transform 0.2s var(--ease-out);
}
.ltds-nav-groupe:hover .ltds-nav-chevron,
.ltds-nav-groupe:focus-within .ltds-nav-chevron,
.ltds-nav-groupe.est-ouvert .ltds-nav-chevron {
  transform: rotate(180deg);
}

.ltds-sous-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 6px);
  z-index: 40;
  min-width: 232px;
  margin-top: 14px;
  padding: 8px;
  display: grid;
  gap: 2px;
  background: var(--color-navbar);
  border-radius: 18px;
  box-shadow: 0 24px 48px -26px rgba(20, 18, 17, 0.55);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s var(--ease-out), transform 0.18s var(--ease-out), visibility 0.18s;
}
/* Pont invisible entre le lien et le panneau : sans lui, le menu se referme
   des que la souris traverse l'espace qui les separe. */
.ltds-sous-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -16px;
  height: 16px;
}
.ltds-nav-groupe:hover .ltds-sous-menu,
.ltds-nav-groupe:focus-within .ltds-sous-menu,
.ltds-nav-groupe.est-ouvert .ltds-sous-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.ltds-sous-menu-lien,
a.ltds-sous-menu-lien {
  display: block;
  padding: 11px 14px;
  border-radius: 12px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--t-ui);
  color: var(--color-accent-800);
  white-space: nowrap;
  transition: background 0.18s, color 0.18s;
}
.ltds-sous-menu-lien:hover,
a.ltds-sous-menu-lien:hover,
.ltds-sous-menu-lien:focus-visible {
  background: var(--color-chapitre);
  color: var(--color-accent-900);
}
.ltds-sous-menu-lien.is-actif {
  background: var(--color-accent-200);
  color: var(--color-accent-900);
}

/* Menu telephone : les profils sont simplement decales, toujours visibles. */
.ltds-menu .ltds-nav-groupe {
  display: block;
}
.ltds-menu .ltds-sous-menu {
  position: static;
  transform: none;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  min-width: 0;
  margin: 2px 0 6px;
  padding: 0 0 0 16px;
  background: none;
  box-shadow: none;
  border-left: 2px solid var(--color-accent-200);
  border-radius: 0;
}
.ltds-menu .ltds-sous-menu::before { display: none; }
.ltds-menu .ltds-sous-menu-lien {
  padding: 10px 14px;
  font-size: var(--t-ui);
}
.ltds-menu .ltds-nav-chevron { display: none; }

@media (prefers-reduced-motion: reduce) {
  .ltds-sous-menu,
  .ltds-nav-chevron { transition: none; }
}


/* 12. Chiffres cles et equipe ============================================== */

.ltds-chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: clamp(24px, 3vw, 44px);
  margin-top: var(--gap-titre);
}
.ltds-chiffre-valeur {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--t-stat);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--color-accent-700);
  white-space: nowrap;
}
.ltds-chiffre-texte {
  font-size: var(--t-small);
  line-height: 1.5;
  margin: 12px 0 0;
  max-width: 28ch;
  text-wrap: pretty;
}

.ltds-equipe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: clamp(24px, 3vw, 40px);
  margin-top: var(--gap-titre);
}
.ltds-membre {
  margin: 0;
}
.ltds-membre-photo,
.ltds-membre-vide {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 20px;
  background: var(--color-chapitre);
}
/* Portrait manquant : les initiales tiennent la place, la grille ne bouge pas
   quand la photo arrive. Un aplat vert de 400 x 530 px ferait un mur : on
   garde donc le cadre en pointilles et on ramasse les initiales dans un
   medaillon, pour que l'attente se lise comme voulue. */
.ltds-membre-vide {
  display: grid;
  place-items: center;
  border: 1px dashed var(--color-divider);
  background: transparent;
}
.ltds-membre-vide span {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--color-chapitre);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--t-h3);
  letter-spacing: 0.02em;
  color: var(--color-accent-700);
}
.ltds-membre-nom {
  display: grid;
  gap: 2px;
  margin-top: 14px;
  font-size: var(--t-small);
  line-height: 1.35;
}
.ltds-membre-role {
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
}

/* Cadre de certification en attente de son logo (visible des administrateurs). */
.ltds-certif-vide {
  display: grid;
  place-items: center;
  border: 1px dashed var(--color-divider);
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
}

/* Equipe : trois portraits par ligne, pour ne pas laisser une personne
   seule en bout de grille. */
@media (min-width: 900px) {
  .ltds-equipe { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 560px) and (max-width: 899px) {
  .ltds-equipe { grid-template-columns: repeat(2, 1fr); }
}


/* 9. Confort tactile et ajustement du texte ================================= */

/* --- Mots plus longs que leur colonne -----------------------------------
   Deux debordements mesures : « l'autoconsommation » a 600 px et
   « conditionnement » a 320 px, ni l'un ni l'autre n'offrant de point de
   coupe naturel — l'apostrophe n'en est pas un.

   Ni cesure ni coupure en plein mot : « compa-rables » dans un titre se
   remarque immediatement, et break-word ferait pire en coupant sans meme un
   trait d'union. On reduit plutot legerement le corps du titre a la largeur
   ou il ne tient plus : le mot rentre, et rien ne se voit.

   Regle generale : aucune cesure automatique nulle part sur le site. */
h1, h2, h3, h4, h5, h6,
.ltds-atout-titre,
.ltds-model-title,
.ltds-step-title,
.ltds-faq-question {
  hyphens: manual;
  -webkit-hyphens: manual;
}

/* --- Zones tactiles ------------------------------------------------------
   Mesure a 390 px : la question de FAQ ne faisait que 23 px de haut, le lien
   de carte 24 px, les liens de pied de page 19 a 24 px. Le seuil retenu est
   44 px, celui des recommandations d'accessibilite et des deux systemes
   mobiles. */

/* La FAQ est le cas le plus grave : le remplissage etait porte par le
   <details>, donc taper a cote du texte — dans la marge de la carte — ne
   depliait rien. On le deplace sur le <summary> et la ligne entiere devient
   la zone tactile. Le <summary> reste en display: block pour conserver son
   triangle d'ouverture. */
.ltds-faq-item,
a.ltds-faq-item { padding: 0; }
.ltds-faq-question,
a.ltds-faq-question {
  padding: 15px 22px;
  min-height: 44px;
}
.ltds-faq-answer,
a.ltds-faq-answer { margin: 0; padding: 0 22px 18px; }

/* Lien en bas d'une carte de modele economique : 24 px de haut, sans
   remplissage. La marge negative compense le remplissage ajoute pour que
   l'ecart visuel avec le texte au-dessus ne change pas. */
.ltds-model-lien,
a.ltds-model-lien {
  margin-top: 8px;
  padding: 10px 0;
  min-height: 44px;
}

@media (max-width: 1080px) {
  /* Pied de page : liens de navigation de 24 px et mentions legales de 19 px,
     ces dernieres cote a cote. */
  .ltds-footer-col > a,
  .ltds-footer-reseaux > a,
  .ltds-footer-legal > a,
  .ltds-footer-legal > .ltds-lien-bouton {
    /* 2.64.7 — « Gestion des cookies » (un bouton) restait a 21 px. */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* 2.64.7 — lien « Voir le certificat (PDF) », seul sur sa ligne : 21 px. */
  .ltds-certif-vedette-action .ltds-read-more {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-top: 0;
  }
  /* Les liens passant de 24 a 44 px, l'ecart de 10 px qui les separait
     ferait trop d'air : on le reduit et on le remet la ou il manque, sous
     l'intitule de colonne et avant l'adresse postale. */
  .ltds-footer-col { gap: 2px; }
  .ltds-footer-col > .ltds-footer-heading { margin-bottom: 6px; }
  .ltds-footer-col > a + span { margin-top: 8px; }
  .ltds-footer-legal { gap: 28px; flex-wrap: wrap; }

  /* Filtres de la page Realisations : 38 px. */
  [data-filters] button {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  /* Champs du formulaire d'etude : 40 px. Le corps reste a 16 px, sous quoi
     Safari iOS zoome la page a la prise de focus. */
  .input,
  input.input,
  select.input { min-height: 44px; }
}

/* --- Longueur de ligne --------------------------------------------------
   Ces lignes de rappel etaient bornees a 76 et 72 caracteres pour menager
   l'oeil. Sur un grand ecran, le retour a la ligne tombait au tiers de la
   page et passait pour un defaut de mise en page plutot que pour un choix.
   Elles vont donc jusqu'au bord du conteneur, comme le reste. */
.ltds-precision { max-width: none; }
.ltds-encart-note > span:last-child { max-width: none; }

/* --- Tableau d'article sur tres petit ecran -----------------------------
   A 320 px le tableau reclamait 313 px pour 272 px disponibles : le
   remplissage des cellules et le white-space: nowrap de la derniere colonne
   l'empechaient de se comprimer. */
@media (max-width: 460px) {
  .ltds-article-body table th,
  .ltds-article-body table td { padding: 12px 5px; }
  .ltds-article-body table th:first-child,
  .ltds-article-body table td:first-child { padding-left: 12px; }
  .ltds-article-body table th:last-child,
  .ltds-article-body table td:last-child {
    padding-right: 12px;
    white-space: normal;
  }
}

/* --- Barre de navigation sur telephone -----------------------------------
   Trois cibles y restaient courtes : le logo (20 a 28 px de haut selon la
   largeur), le bouton « Étude gratuite » (34 px) et le bouton menu (38 px
   sous 340 px). La hauteur de la barre est fixee par son element le plus
   haut : les porter tous a 44 px ne l'agrandit donc pas, et la largeur —
   seule vraie contrainte a 320 px — ne bouge pas. */
@media (max-width: 1080px) {
  [data-navbar] > a:first-child {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  [data-actions] > a.btn {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }
}
@media (max-width: 340px) {
  [data-burger] { width: 44px !important; height: 44px !important; }
}

/* 10. Justification du texte courant ======================================= */

/* La justification repartit sur les blancs entre les mots la place qui manque
   en bout de ligne. Deux choses la rendent acceptable : une colonne large, et
   la cesure, qui fournit des points de coupe supplementaires.

   La cesure est ecartee : couper « comparables » en « compa-rables » au fil
   d'un titre ou d'un paragraphe se remarque trop. Il ne reste donc que la
   largeur de colonne, et la mesure est sans appel.

   Releve sans cesure, part des lignes dont le plus grand blanc atteint trois
   fois une espace normale :

     corps d'article et pages legales (89 car./ligne)   0 a 4 %
     phrase de precision sous une grille (87 car.)      0 %
     reponse de FAQ (52 a 79 car.)                      3 a 22 % selon l'ecran
     note d'encart (98 car., mais peu de mots/ligne)   15 %
     texte d'encart (47 car.)                          11 a 24 %
     texte de carte, d'etape, d'atout (23 a 37 car.)   26 a 52 %

   Seuls les deux premiers tiennent a toutes les largeurs. Le reste du site
   vit dans des cartes etroites par construction : les justifier sans cesure
   creuse des trous francs, et la justification y est donc abandonnee.

   Sur telephone, rien n'est justifie : les colonnes y font 272 a 342 px.

   test-justification.js verifie tout cela a chaque livraison. */

@media (min-width: 900px) {
  .ltds-article-body :is(p, li, dd, blockquote),
  .ltds-precision {
    text-align: justify;
  }
}

/* --- Les deux titres qui ne rentrent pas ---------------------------------
   « l'autoconsommation » (18 signes, aucun point de coupe : l'apostrophe
   n'en est pas un) deborde de 7 px sa carte a 600 px de fenetre, et
   « conditionnement » de 3 px le titre d'une realisation a 320 px. Plutot
   que de les couper, on reduit le corps juste assez pour qu'ils rentrent :
   l'ecart ne se voit pas, une coupure si. */
@media (max-width: 700px) {
  .ltds-atout-titre { font-size: calc(var(--t-h3) * 0.94); }
}
@media (max-width: 360px) {
  /* Les gabarits posent font-size: var(--t-h1-page) en style en ligne, qui
     l'emporte sur toute regle de la feuille. On redefinit donc le jeton
     lui-meme : 34 px etait le plancher, 32 suffit a faire rentrer le mot. */
  :root { --t-h1-page: clamp(32px, 4.4vw, 56px); }
}

/* 2.57.0 — « Pour aller plus loin » sous la FAQ des pages de profil. */
.ltds-plus-loin {
  margin: clamp(28px, 3vw, 40px) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  align-items: baseline;
  font-size: var(--t-small);
  line-height: 1.5;
}
.ltds-plus-loin-titre {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  width: 100%;
}
.ltds-plus-loin-lien {
  color: var(--color-accent-700);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ltds-plus-loin-lien:hover { color: var(--color-accent-800); }

/* 2.58.0 — Mesure d'audience : etat et bouton de refus (page confidentialite) */
.ltds-mesure {
  margin: var(--space-3) 0; padding: var(--space-3);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.ltds-mesure-etat { margin: 0 0 var(--space-2); }
.ltds-mesure-etat:last-child { margin-bottom: 0; }
.ltds-mesure [hidden] { display: none !important; }

/* 2.59.0 — Bandeau des etapes : un parcours, pas une boucle.
   Sur telephone et tablette, les cartes glissent de 01 a 05 et s'arretent
   (fleches grisees aux extremites). Sur ordinateur, les cinq tiennent sur
   une ligne, reliees par un trait, sans fleches. Chiffres agrandis. */
.ltds-etapes-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 20px;
  align-items: stretch;
}
.ltds-step {
  flex: 0 0 clamp(230px, 24vw, 300px);
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}
.ltds-step-tete {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 14px 4px;
}
.ltds-step-num,
a.ltds-step-num {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(38px, 3.6vw, 52px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-accent-400);
  font-variant-numeric: tabular-nums;
}
/* Le trait part du chiffre et rejoint le suivant, par-dessus l'ecart entre
   deux cartes. Rien apres la derniere etape. */
.ltds-step-tete::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  margin-right: -20px;
  background: rgba(243, 242, 242, 0.24);
}
.ltds-step:last-child .ltds-step-tete::after { display: none; }
.ltds-step-card,
a.ltds-step-card {
  flex: 1 1 auto;
}
.ltds-step-card .ltds-step-title { margin-top: 0; }
@media (min-width: 1100px) {
  .ltds-etappiste { overflow: visible; }
  .ltds-etappiste > .ltds-etapes-liste {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(var(--ltds-etapes, 5), minmax(0, 1fr));
  }
  .ltds-bandeaux-js .ltds-bande--etapes .ltds-bande-fleches { display: none; }
}

/* 2.59.0 — Page Ressources sans article : message d'attente sur toute la
   largeur de la grille. */
.ltds-ressources-vide {
  grid-column: 1 / -1;
  padding: clamp(28px, 4vw, 48px);
  border: 1px dashed color-mix(in srgb, var(--color-text) 22%, transparent);
  border-radius: 24px;
}
.ltds-ressources-vide .ltds-eyebrow { margin: 0; color: var(--color-accent-700); }
.ltds-ressources-vide-texte {
  font-size: var(--t-lead);
  line-height: 1.55;
  margin: 14px 0 0;
  max-width: 52ch;
  text-wrap: pretty;
}

/* 2.60.1 — Zones tactiles : deux boutons restaient sous 44 px de haut
   (mesure a 375 et 768 px) : le bouton de refus de la mesure d'audience
   (37 px) et le retour a l'accueil de la page introuvable (37 px). */
.ltds-mesure .btn,
.ltds-404-retour {
  min-height: 44px;
}

/* 2.61.0 — Certification mise en avant (AQPV, Qui sommes-nous) : grand logo
   dans une carte blanche a gauche, texte a droite ; les autres
   certifications en petit sous le logo (2.64.1), sous « Egalement
   certifies ». */
.ltds-certif-vedette {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.ltds-certif-vedette-logo {
  display: grid;
  place-items: center;
  background: #fff;
  border-radius: 28px;
  padding: clamp(28px, 4vw, 48px);
  box-shadow: 0 1px 0 rgba(20, 18, 17, 0.06);
  text-decoration: none;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
a.ltds-certif-vedette-logo:hover,
a.ltds-certif-vedette-logo:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 26px 44px -26px rgba(20, 18, 17, 0.45);
}
.ltds-certif-vedette-img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: clamp(150px, 18vw, 220px);
  object-fit: contain;
}
.ltds-certif-vedette-propos .ltds-eyebrow { margin: 0; }
.ltds-certif-vedette-titre {
  font-size: var(--t-h2);
  line-height: 1.08;
  letter-spacing: -0.028em;
  margin: 16px 0 0;
  max-width: 22ch;
  text-wrap: pretty;
}
.ltds-certif-vedette-texte {
  margin: 20px 0 0;
  max-width: 62ch;
}
.ltds-certif-vedette-texte p {
  font-size: var(--t-body);
  line-height: 1.65;
  margin: 0 0 14px;
  text-wrap: pretty;
}
/* 2.61.1 — le dernier paragraphe (ce que la certification apporte au
   client) ressort en encadre, filet vert a gauche. */
.ltds-certif-vedette-texte .ltds-certif-vedette-cle {
  margin: 22px 0 0;
  padding: 18px 22px;
  background: #fff;
  border-left: 4px solid var(--color-accent-fond);
  border-radius: 0 16px 16px 0;
  font-weight: 600;
  line-height: 1.55;
}
.ltds-certif-vedette-action { margin: 22px 0 0; }
/* 2.64.1 — les autres certifications (ISO) rejoignent la colonne de
   gauche, sous le logo : le groupe logo + ISO est centre en hauteur face
   au texte, la section ne s'allonge plus. Sur mobile, l'ordre reste logo,
   texte, puis ISO sous un filet. */
.ltds-certifs-autres {
  padding-top: clamp(22px, 3vw, 32px);
  border-top: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
}
@media (min-width: 860px) {
  .ltds-certif-vedette {
    grid-template-columns: minmax(240px, 0.7fr) minmax(0, 1.3fr);
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas:
      ".      propos"
      "logo   propos"
      "autres propos"
      ".      propos";
    row-gap: 0;
  }
  .ltds-certif-vedette-logo { grid-area: logo; }
  .ltds-certif-vedette-propos { grid-area: propos; }
  .ltds-certifs-autres {
    grid-area: autres;
    align-self: start;
    margin-top: 22px;
    padding-top: 0;
    border-top: 0;
  }
  .ltds-certifs-autres .ltds-certifs--petits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: none;
  }
}
.ltds-certifs-autres-titre {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.ltds-certifs--petits {
  margin-top: 16px;
  grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr));
  gap: 16px;
  max-width: 400px;
}
.ltds-certifs--petits .ltds-certif-cadre {
  min-height: 88px;
  padding: 14px 18px;
  border-radius: 16px;
}
.ltds-certifs--petits .ltds-certif-img { max-height: 54px; }


/* 2.63.0 — Bandeaux d'appel verts (fin des pages « Vous êtes » et Qui
   sommes-nous, bandeau vert de l'accueil) : un degrade de lumiere casse
   l'aplat. Le vert s'eclaircit en haut a droite et fonce en bas a gauche,
   sans motif (choix de Jeremy le 03/11, apres essai de lignes fines). */
.ltds-cta,
.ltds-rupture {
  background:
    radial-gradient(120% 140% at 100% 0%, #4a9a36 0%, rgba(74, 154, 54, 0) 55%),
    radial-gradient(90% 120% at 0% 100%, #24581a 0%, rgba(36, 88, 26, 0) 60%),
    var(--color-accent-fond);
}
/* Meme principe pour les bandeaux vert clair (Ressources, articles). */
.ltds-bandeau-clair {
  background:
    radial-gradient(120% 140% at 100% 0%, #d9eccd 0%, rgba(217, 236, 205, 0) 55%),
    radial-gradient(90% 120% at 0% 100%, #a3cf8e 0%, rgba(163, 207, 142, 0) 60%),
    var(--color-accent-300) !important;
}

/* 2.64.0 — Bandeau de consentement a la mesure detaillee. En bas a gauche,
   sans voile sur la page : on peut lire et naviguer sans repondre. Les deux
   boutons ont exactement le meme poids. */
.ltds-consent {
  position: fixed;
  z-index: 200;
  left: 16px;
  bottom: 16px;
  width: min(440px, calc(100vw - 32px));
  background: #fff;
  color: var(--color-text);
  border-radius: 20px;
  padding: 20px 22px;
  box-shadow: 0 18px 50px -18px rgba(20, 18, 17, 0.45), 0 0 0 1px rgba(20, 18, 17, 0.06);
}
.ltds-consent[hidden] { display: none; }
.ltds-consent-titre {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--t-body);
}
.ltds-consent-texte {
  margin: 8px 0 0;
  font-size: var(--t-small);
  line-height: 1.55;
}
.ltds-consent-texte a { color: var(--color-accent-700); text-decoration: underline; }
.ltds-consent-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 16px;
}
.ltds-consent-bouton {
  min-height: 44px;
  background: var(--color-accent-100);
  color: var(--color-text);
  border: 1px solid color-mix(in srgb, var(--color-text) 16%, transparent);
}
.ltds-consent-bouton:hover,
.ltds-consent-bouton:focus-visible {
  background: var(--color-accent-fond);
  color: #fff;
  border-color: var(--color-accent-fond);
}
/* Lien du pied de page qui est en realite un bouton. */
.ltds-lien-bouton {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  text-decoration: inherit;
}
.ltds-mesure-etat--detail { margin-top: 18px; }

/* 2.64.7 — Realisations des pages « Vous etes » : sur telephone, les six
   fiches defilent au doigt au lieu de s'empiler (3 100 px de defilement
   mesures a 375 px). La fiche suivante depasse a droite : on voit qu'il y
   a une suite. Ordinateur et tablette : grille inchangee. */
@media (max-width: 719px) {
  .ltds-real-bandeau {
    display: flex !important;
    gap: 16px !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    margin-left: -24px;
    margin-right: -24px;
    padding: 0 24px 6px;
    scroll-padding-left: 24px;
    scrollbar-width: none;
  }
  .ltds-real-bandeau::-webkit-scrollbar { display: none; }
  .ltds-real-bandeau > article {
    flex: 0 0 84%;
    scroll-snap-align: start;
  }
}

/* 2.64.7 — Page Realisations : « Voir plus de realisations ». */
.ltds-voir-plus {
  margin: clamp(28px, 3vw, 40px) 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
}
.ltds-voir-plus[hidden] { display: none; }
.ltds-voir-plus .btn { min-height: 44px; padding: 13px 22px; }
.ltds-voir-plus-compte {
  font-size: var(--t-small);
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
}