/* ==========================================================================
   Digital Local - mise en page

   Registre Ritovex : conteneur large, colonnes déséquilibrées, filets tracés,
   rangées pleine largeur, deux bandeaux qui défilent. Rien ne flotte.

   S'y greffent les cartes, et seulement là où une carte se justifie. Une carte
   dit « ceci est un objet séparé, tu peux le comparer aux autres et cliquer
   dessus ». Elle est donc à sa place sur les métiers, les réalisations, les
   avis, les articles, les formules, l'équipe.

   Elle n'est PAS à sa place sur les repères chiffrés, qu'on lit d'un coup, ni
   sur les étapes d'une méthode, qui se suivent au lieu de se comparer, ni sur
   un bloc d'appel qui est déjà l'objet. C'est ce tri qui garde l'air.
   ========================================================================== */

.sect { padding-block: clamp(56px, 6.5vw, 110px); }
.sect--court { padding-block: clamp(36px, 4vw, 64px); }
.bande--creme { background: var(--creme); }
.bande--encre { background: var(--encre); color: var(--blanc); }

/* Les deux filets verticaux qui bornent le conteneur. Le trait de Ritovex
   qu'on garde partout où rien ne vient toucher le bord. */
.regle { position: relative; }
.regle::before, .regle::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 1px;
  background: var(--filet); pointer-events: none;
}
.regle::before { left: var(--gouttiere); }
.regle::after  { right: var(--gouttiere); }
@media (max-width: 1100px) { .regle::before, .regle::after { display: none; } }

/* ------------------------------------------------------------- en-tête */

.entete { position: sticky; top: 0; z-index: 40; background: var(--blanc); border-bottom: 1px solid var(--filet); }
.entete-inner { display: flex; align-items: center; gap: 28px; min-height: 76px; }
.marque { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.3rem; letter-spacing: -.035em; }
.marque-signe { width: 30px; height: 30px; border-radius: 7px; background: var(--encre); }
.menu { display: flex; gap: 26px; margin-inline: auto; font-weight: 500; }
.menu a { padding-block: 4px; border-bottom: 2px solid transparent; }
.menu a[aria-current="page"], .menu a:hover { border-bottom-color: var(--accent-bord); }
.entete-droite { display: flex; align-items: center; gap: 18px; padding-left: 26px; border-left: 1px solid var(--filet); }
.tel { font-weight: 700; font-size: 1rem; }
.tel small { display: block; font-size: .72rem; font-weight: 600; }
.burger { display: none; border: 1px solid var(--filet-fort); border-radius: var(--r-bouton); background: none; font: inherit; font-weight: 600; padding: 9px 14px; cursor: pointer; }
.menu-mobile { display: grid; gap: 14px; padding: 18px var(--gouttiere) 24px; border-top: 1px solid var(--filet); }
.menu-mobile[hidden] { display: none; }
@media (max-width: 980px) { .menu, .entete-droite { display: none; } .burger { display: block; margin-inline-start: auto; } }

/* --------------------------------------------------------- les en-têtes */

.tete { text-align: center; max-width: 640px; margin: 0 auto clamp(36px, 4vw, 62px); }
.tete .pastille { margin-bottom: 18px; }
.tete p { margin: 14px auto 0; max-width: 58ch; }

.tete--fendue {
  display: flex; justify-content: space-between; align-items: end; text-align: left;
  max-width: none; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(32px, 4vw, 56px);
}
.tete--fendue .pastille { margin-bottom: 14px; }
.tete--fendue h1, .tete--fendue h2 { max-width: 20ch; }
.tete--fendue p { margin: 12px 0 0; }

/* ------------------------------------------------------------- bandeaux */

/* Accueil : deux colonnes déséquilibrées, le titre au fil du bord. */
.bandeau { padding-top: clamp(40px, 5vw, 80px); }
.bandeau-inner {
  display: grid; grid-template-columns: minmax(0, 600fr) minmax(0, 631fr);
  gap: clamp(32px, 4vw, 68px); align-items: center;
}
.bandeau h1 { margin-top: 4px; max-width: 13ch; }
.chapo { margin-top: 22px; max-width: 46ch; }
.boutons { display: flex; align-items: center; gap: 18px; margin-top: 32px; flex-wrap: wrap; }
.boutons--centre { justify-content: center; }
@media (max-width: 940px) { .bandeau-inner { grid-template-columns: 1fr; } }

/* Pages intérieures : un bandeau court, titre et chapeau, rien d'autre. */
.bandeau--interieur { padding-block: clamp(48px, 6vw, 96px) clamp(28px, 3vw, 44px); border-bottom: 1px solid var(--filet); }
.bandeau--interieur .pastille { margin-bottom: 18px; }
.bandeau--interieur h1 { max-width: 18ch; }
.bandeau--interieur p { margin-top: 20px; max-width: 58ch; }

.photo-cadre { border-radius: var(--r-image); overflow: hidden; background: var(--creme); }
.photo-cadre img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 8 / 7; }
@media (max-width: 940px) { .photo-cadre img { aspect-ratio: 4 / 3; } }

/* ------------------------------------------------------------ la carte */

.carte {
  background: var(--blanc); color: var(--encre);
  border-radius: 22px; padding: clamp(24px, 2.4vw, 32px);
  box-shadow: 0 1px 2px rgba(20,20,20,.05), 0 8px 20px rgba(20,20,20,.07);
  display: grid; gap: 12px; align-content: start;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.carte:hover { transform: translateY(-3px); box-shadow: 0 3px 6px rgba(20,20,20,.07), 0 18px 34px rgba(20,20,20,.12); }
.carte p { font-size: 1rem; }

/* Une carte blanche reste une surface blanche, même posée sur du crème. */
.bande--creme .carte {
  --accent:       var(--accent-sur-blanc);
  --accent-texte: var(--accent-texte-sur-blanc);
  --accent-doux:  var(--accent-doux-sur-blanc);
  --accent-bord:  var(--accent-sur-blanc);
}

/* La pastille pêche, le seul emprunt chromatique à Digigrowth. Elle ne vit
   que sur du blanc, donc uniquement à l'intérieur des cartes. */
.icone {
  display: grid; place-items: center; width: 52px; height: 52px;
  border-radius: 15px; background: var(--accent-doux);
  color: var(--encre); font-size: 1.15rem; font-weight: 700; margin-bottom: 2px;
}

/* Variante creuse : un contour au lieu d'un fond, pour ne pas disparaître
   quand elle est posée sur une bande de sa propre couleur. */
.carte--creuse {
  background: transparent; box-shadow: none; border: 1px solid var(--filet-fort);
  --accent: var(--encre); --accent-texte: var(--encre);
  --accent-doux: var(--creme-2); --accent-bord: var(--filet-fort);
}
.carte--creuse:hover { transform: none; box-shadow: none; border-color: var(--encre); }
.carte--creuse .btn { justify-self: start; margin-top: 6px; }

.grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: clamp(18px, 2vw, 26px); }
.grille--2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

/* -------------------------------------------------------- deux colonnes */

.duo {
  display: grid; grid-template-columns: minmax(0, 584fr) minmax(0, 630fr);
  gap: clamp(32px, 4vw, 74px); align-items: center;
}
.duo--inverse { grid-template-columns: minmax(0, 630fr) minmax(0, 584fr); }
.duo--inverse > :first-child { order: 2; }
.duo-texte { display: grid; gap: clamp(28px, 3vw, 44px); }
.duo-texte h2, .duo-texte h3 { margin-bottom: 14px; }
.duo-texte p { margin-bottom: 18px; }
@media (max-width: 940px) {
  .duo, .duo--inverse { grid-template-columns: 1fr; }
  .duo--inverse > :first-child { order: 0; }
}

/* Les repères chiffrés restent une LIGNE : on les lit, on ne clique pas. */
.reperes { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); border-top: 1px solid var(--filet); }
.reperes li { padding: 20px 16px 0 0; }
.reperes b {
  display: block; font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.3rem); font-weight: 700;
  letter-spacing: -.04em; line-height: 1; color: var(--accent-texte);
}
.reperes span { display: block; margin-top: 6px; font-size: var(--t-petit); font-weight: 600; }
.bande--encre .reperes { border-color: rgba(255,255,255,.32); }
.bande--encre .reperes b { color: var(--blanc); }

/* ------------------------------------------------- rangées pleine largeur */

/* Le trait le plus reconnaissable du registre : une liste qui reste une
   liste. Sert aux questions, aux postes ouverts, aux prestations détaillées. */
.rangs { border-top: 1px solid var(--filet); }
.rang {
  display: grid; grid-template-columns: 84px minmax(0, 24ch) minmax(0, 1fr) 48px;
  gap: clamp(16px, 2.4vw, 40px); align-items: center;
  padding-block: clamp(24px, 2.6vw, 34px); border-bottom: 1px solid var(--filet);
  transition: padding-inline .3s var(--ease);
}
.rang:hover { padding-inline: 14px; }
.rang-num { font-size: var(--t-petit); font-weight: 700; letter-spacing: .08em; }
.rang h3 { font-size: clamp(1.2rem, 1rem + 1vw, 1.75rem); }
.rang p { font-size: 1rem; max-width: 56ch; }
.rang-fin { justify-self: end; font-size: 1.3rem; font-weight: 700; }
.bande--encre .rangs, .bande--encre .rang { border-color: rgba(255, 255, 255, .3); }
@media (max-width: 900px) {
  .rang { grid-template-columns: 56px minmax(0, 1fr) auto; }
  .rang p { grid-column: 2 / 4; }
}

/* --------------------------------------------------------- bandeau défilant */

.defile { overflow: hidden; padding-block: 14px; }
.defile-piste {
  display: flex; gap: clamp(20px, 2.4vw, 32px); width: max-content;
  padding-inline: var(--gouttiere);
  animation: defiler 46s linear infinite;
}
.defile:hover .defile-piste, .defile:focus-within .defile-piste { animation-play-state: paused; }
.defile--inverse .defile-piste { animation-direction: reverse; animation-duration: 54s; }
@keyframes defiler { to { transform: translateX(calc(-50% - clamp(10px, 1.2vw, 16px))); } }
@media (prefers-reduced-motion: reduce) {
  .defile-piste { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
}

/* --------------------------------------------------------- réalisations */

.projet { width: clamp(280px, 30vw, 420px); flex: none; padding: clamp(16px, 1.6vw, 20px); gap: 10px; }
.projet-photo { overflow: hidden; border-radius: 14px; background: var(--creme); margin-bottom: 6px; }
.projet-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s var(--ease); }
.projet:hover .projet-photo img { transform: scale(1.04); }
.projet h3 { margin: 6px 0 0; }

/* La grille complète, sur la page réalisations. */
.travaux { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(20px, 2.2vw, 30px); }
.travaux .projet { width: auto; }
.travaux [hidden] { display: none; }

.filtres { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(24px, 3vw, 36px); }
.filtres button {
  background: transparent; border: 1px solid var(--filet-fort); border-radius: 999px;
  color: var(--encre); font: inherit; font-size: .88rem; font-weight: 600;
  padding: 7px 16px; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s;
}
.filtres button[aria-pressed="true"] { background: var(--encre); color: var(--blanc); border-color: var(--encre); }

/* --------------------------------------------------------------- méthode */

.methode { display: grid; grid-template-columns: minmax(0, 405fr) minmax(0, 610fr); gap: clamp(36px, 5vw, 90px); align-items: start; }
.methode-texte { position: sticky; top: 108px; }
.methode-texte .pastille { margin-bottom: 18px; }
.methode-texte p { margin: 14px 0 30px; }
.etapes { display: grid; gap: clamp(20px, 2.2vw, 30px); }
.etape {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px 20px;
  padding-block: clamp(22px, 2.4vw, 32px); border-top: 1px solid var(--filet-fort);
}
/* Trois enfants pour deux colonnes : sans ça le paragraphe repart dans la
   colonne étroite du numéro et se casse mot à mot. */
.etape > h3, .etape > p { grid-column: 2; }
.etape-num { font-size: var(--t-petit); font-weight: 700; letter-spacing: .08em; }
@media (max-width: 940px) {
  .methode { grid-template-columns: 1fr; }
  .methode-texte { position: static; }
}

/* ----------------------------------------------------------------- avis */

.avis-carte { width: clamp(290px, 32vw, 430px); flex: none; align-content: space-between; gap: 22px; padding: clamp(26px, 2.6vw, 34px); }
.avis-carte blockquote { font-size: var(--t-moyen); font-weight: 500; line-height: 1.32; }
.avis-qui b { display: block; font-weight: 700; }
.avis-qui span { display: block; font-size: var(--t-petit); font-weight: 600; }

/* --------------------------------------------------------------- appel */

.appel { border-radius: var(--r-bloc); text-align: center; padding: clamp(44px, 5.5vw, 86px) clamp(24px, 4vw, 64px); }
.appel h2 { max-width: 17ch; margin: 18px auto 0; }
.appel p { max-width: 48ch; margin: 16px auto 0; }
.appel .boutons { margin-top: 32px; }

/* --------------------------------------------------------------- journal */

.journal { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(24px, 2.6vw, 34px); }
.billet-photo { overflow: hidden; border-radius: 14px; background: var(--creme); margin-bottom: 4px; }
.billet-photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .5s var(--ease); }
.billet:hover .billet-photo img { transform: scale(1.04); }
.billet h3 { margin-top: 4px; }

.pagination { display: flex; gap: 8px; justify-content: center; margin-top: clamp(30px, 3.4vw, 48px); }
.pagination a, .pagination span {
  display: grid; place-items: center; min-width: 44px; height: 44px; padding-inline: 12px;
  border: 1px solid var(--filet-fort); border-radius: var(--r-bouton); font-weight: 600;
}
.pagination [aria-current="page"] { background: var(--encre); color: var(--blanc); border-color: var(--encre); }

/* --------------------------------------------------------------- formules */

.formules { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: clamp(18px, 2vw, 26px); align-items: start; }
.formule { gap: 16px; }
.formule--phare { border: 2px solid var(--encre); }
.formule-prix { font-size: clamp(2rem, 1.4rem + 2vw, 2.8rem); font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.formule-prix small { display: block; margin-top: 8px; font-size: var(--t-petit); font-weight: 600; letter-spacing: 0; }
.formule .btn { justify-self: stretch; justify-content: center; margin-top: 4px; }
.marque-phare {
  justify-self: start; font-size: .74rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; background: var(--encre); color: var(--blanc);
  padding: 4px 10px; border-radius: 999px;
}

/* -------------------------------------------------------------- questions */

.questions { max-width: 900px; border-top: 1px solid var(--filet); }
.question { border-bottom: 1px solid var(--filet); }
.question summary {
  display: flex; justify-content: space-between; gap: 24px; align-items: baseline;
  padding-block: 22px; cursor: pointer; list-style: none;
  font-size: var(--t-moyen); font-weight: 700;
}
.question summary::-webkit-details-marker { display: none; }
.question summary::after { content: "+"; color: var(--accent-texte); font-weight: 500; font-size: 1.5em; line-height: 1; }
.question[open] summary::after { content: "-"; }
.question p { padding-bottom: 24px; }

/* ---------------------------------------------------------------- équipe */

.equipe { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(18px, 2vw, 26px); }
.membre { padding: 0; overflow: hidden; gap: 0; }
.membre img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.membre-nom { padding: 18px clamp(18px, 2vw, 24px) 22px; display: grid; gap: 4px; }
.membre-nom span { font-size: var(--t-petit); font-weight: 600; }

/* --------------------------------------------------------------- galerie */

.galerie { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.galerie img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; }

/* ------------------------------------------------------- fiche de projet */

.fiche { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: clamp(32px, 4vw, 64px); align-items: start; }
.fiche-corps { display: grid; gap: 22px; }
.fiche-corps h2 { font-size: var(--t-moyen); }
.fiche-cote { display: grid; gap: 0; border-top: 1px solid var(--filet-fort); position: sticky; top: 108px; }
.fiche-cote div { padding-block: 16px; border-bottom: 1px solid var(--filet); }
.fiche-cote dt { font-size: var(--t-petit); font-weight: 600; margin-bottom: 4px; }
.fiche-cote dd { font-weight: 700; }
@media (max-width: 940px) { .fiche { grid-template-columns: 1fr; } .fiche-cote { position: static; } }

/* ------------------------------------------------------------- article */

.article { max-width: 68ch; margin-inline: auto; }
.article > * + * { margin-top: 22px; }
.article h2 { font-size: var(--t-moyen); margin-top: 44px; }
.article ul { display: grid; gap: 10px; }
.article ul li { position: relative; padding-left: 22px; }
.article ul li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-bord); }
.article figure img { width: 100%; border-radius: var(--r-image); }
.article figcaption { margin-top: 10px; font-size: var(--t-petit); font-weight: 600; }
.article blockquote {
  border-left: 3px solid var(--encre); padding-left: 22px;
  font-size: var(--t-moyen); font-weight: 700; letter-spacing: -.02em; line-height: 1.3;
}

/* ------------------------------------------------------------ formulaire */

.formulaire { display: grid; gap: 18px; }
.champ { display: grid; gap: 7px; }
.champ label { font-size: var(--t-petit); font-weight: 700; }
.champ input, .champ textarea, .champ select {
  border: 1px solid var(--filet-fort); border-radius: var(--r-bouton);
  background: var(--blanc); color: var(--encre);
  font: inherit; padding: 13px 16px; width: 100%;
}
.champ textarea { min-height: 150px; resize: vertical; }
.champ input::placeholder, .champ textarea::placeholder { color: #5d5750; }
.champ--paire { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.note-formulaire:empty { display: none; }
.note-formulaire { font-size: var(--t-petit); font-weight: 700; padding: 12px 16px; background: var(--creme); border-radius: var(--r-bouton); }

.contact-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 72px); align-items: start; }
.coordonnees { display: grid; gap: 26px; }
.coordonnees h3 { font-size: 1.05rem; margin-bottom: 6px; }
@media (max-width: 940px) { .contact-grille { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- logos */

.logos { display: flex; flex-wrap: wrap; gap: clamp(20px, 3vw, 48px); align-items: center; justify-content: center; }
.logos li { font-size: 1.1rem; font-weight: 700; letter-spacing: -.02em; }

/* ------------------------------------------------------------------ pied */

.pied { background: var(--encre); color: var(--blanc); padding-block: clamp(48px, 6vw, 84px) 24px; }
.pied a:hover { color: var(--accent-sur-blanc); }
.pied-haut { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 32px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.32); }
.pied h4 { font-size: var(--t-petit); font-weight: 700; margin-bottom: 12px; }
.pied ul { display: grid; gap: 8px; font-size: var(--t-petit); }
.pied-bas { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 22px; font-size: var(--t-petit); }