/* ==========================================================================
   MISE EN PAGE DIGIGROWTH - copie de l'architecture réelle de l'accueil

   Mêmes jetons que l'autre gabarit : `base.css` fournit les couleurs, la
   police et l'échelle. Seule la disposition change ici.

   Relevé sur la reproduction fidèle du gabarit :
   - fond de page teinté, et des PANNEAUX blancs posés dessus
   - héros en deux colonnes, le titre logé dans une carte
   - métiers en grille de cartes régulières de trois colonnes
   - un panneau qui ne contient qu'une phrase, en très grand
   - méthode en onglets, liste à gauche, panneau à droite
   - réalisations en carrousel avec deux flèches
   - journal en grille inégale : une vedette, trois brèves, une inscription
   - questions en accordéon, une carte par question
   - rien ne touche rien : c'est le vide qui sépare
   ========================================================================== */

:root {
  --d-r-carte: 24px;
  --d-r-panneau: 40px;
  --d-ombre:   0 1px 2px rgba(20,20,20,.05), 0 6px 16px rgba(20,20,20,.06);
  --d-ombre-h: 0 3px 6px rgba(20,20,20,.07), 0 18px 34px rgba(20,20,20,.11);
  --d-fond: #f7f3ee;
}

/* Le fond de page n'est pas blanc : c'est lui qui fait exister les cartes. */
body { background: var(--d-fond); }
.entete { background: var(--d-fond); }
.d-sect { padding-block: clamp(48px, 5.5vw, 92px); }
.btn, .burger, .d-fleche { border-radius: 999px; }
.marque-signe { border-radius: 10px; background: var(--accent-doux); }

/* La carte, unité de base du gabarit. */
.d-carte {
  background: var(--blanc); border-radius: var(--d-r-carte);
  padding: clamp(24px, 2.6vw, 36px); box-shadow: var(--d-ombre);
}

/* Le panneau : une bande blanche arrondie qui ne touche pas les bords. */
.d-panneau {
  background: var(--blanc); border-radius: var(--d-r-panneau);
  margin-inline: var(--gouttiere);
}
.d-panneau .wrap { padding-inline: clamp(8px, 1.6vw, 26px); }

.wrap--etroit { max-width: 900px; }

/* Le sur-titre du gabarit : une pastille crème pleine, généreuse, sans filet.
   Elle sert de repère de couleur autant que de libellé. */
.pastille {
  display: inline-block; background: var(--creme);
  padding: 8px 18px; border-radius: 999px;
  font-size: var(--t-petit); font-weight: 600; margin-bottom: 20px;
  /* Les cartes de ce gabarit sont des grilles : sans cette ligne, la pastille
     s'étire sur toute la largeur au lieu de se caler sur son texte. */
  justify-self: start;
}

/* --------------------------------------------------------------- 01 héros */

.d-heros-inner {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(24px, 2.6vw, 40px); align-items: stretch;
}
.d-carte-heros { display: grid; align-content: center; gap: 0; padding: clamp(30px, 3.4vw, 54px); }
.d-carte-heros h1 { max-width: 13ch; }
.d-lede { margin-top: 20px; max-width: 44ch; }
.d-boutons { display: flex; align-items: center; gap: 18px; margin-top: 30px; flex-wrap: wrap; }
.d-heros-visuel { border-radius: var(--d-r-carte); overflow: hidden; background: var(--creme); box-shadow: var(--d-ombre); }
.d-heros-visuel img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3.4; }
@media (max-width: 940px) {
  .d-heros-inner { grid-template-columns: 1fr; }
  .d-heros-visuel img { aspect-ratio: 4 / 3; }
}

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

/* Centré par défaut : c'est la marque de fabrique du gabarit. */
.d-tete { text-align: center; max-width: 620px; margin: 0 auto clamp(30px, 3.4vw, 50px); }
.d-tete p { margin-top: 12px; }
.d-tete--fendue {
  display: flex; justify-content: space-between; align-items: end; text-align: left;
  max-width: none; gap: 24px; flex-wrap: wrap;
}
.d-tete--fendue h2 { max-width: 20ch; }
.d-tete--fendue p { margin-top: 10px; }

/* ------------------------------------------------------------- 02 métiers */

.d-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: clamp(18px, 2vw, 26px); }
.d-carte-metier {
  display: grid; gap: 14px; align-content: start;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.d-carte-metier:hover { transform: translateY(-3px); box-shadow: var(--d-ombre-h); }
.d-carte-metier p { font-size: 1rem; }
.d-carte-metier--appel { background: var(--creme); box-shadow: none; }
.d-carte-metier--appel .btn { justify-self: start; margin-top: 6px; }
.d-icone {
  display: grid; place-items: center; width: 52px; height: 52px;
  border-radius: 16px; background: var(--accent-doux);
  color: var(--encre); font-size: 1.15rem; font-weight: 700;
}

/* ----------------------------------------------------------- 03 manifeste */

.d-manifeste { padding-block: clamp(56px, 7vw, 112px); }
.d-manifeste-texte {
  max-width: 22ch; margin-inline: auto; text-align: center;
  font-size: clamp(1.9rem, 1.1rem + 3.4vw, 3.4rem); font-weight: 700;
  letter-spacing: -.035em; line-height: 1.1; text-wrap: balance;
}
.d-manifeste-texte span { color: var(--accent-texte); }

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

.d-onglets { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.d-liste-onglets { display: grid; gap: 16px; }
.d-onglet {
  display: flex; align-items: center; gap: 18px;
  padding: 20px 24px; border-radius: var(--d-r-carte);
  background: transparent; border: 1px solid var(--filet);
  font: inherit; color: var(--encre); text-align: left; cursor: pointer;
  transition: background-color .24s, box-shadow .24s, border-color .24s;
}
.d-onglet[aria-selected="true"] { background: var(--blanc); border-color: transparent; box-shadow: var(--d-ombre); }
.d-onglet-nom { font-size: var(--t-moyen); font-weight: 700; }
.d-panneau-onglet { display: grid; gap: 16px; justify-items: start; padding: clamp(28px, 3vw, 40px); }
.d-panneau-onglet[hidden] { display: none; }
.d-num { font-size: var(--t-petit); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-texte); }
@media (max-width: 940px) { .d-onglets { grid-template-columns: 1fr; } }

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

.d-appel { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 2.6vw, 40px); align-items: stretch; }
.d-carte-appel { display: grid; align-content: center; gap: 20px; justify-items: start; padding: clamp(30px, 3.4vw, 52px); }
.d-carte-appel h2 { max-width: 15ch; }
.d-coord { display: grid; gap: 16px; }
.d-coord b { display: block; font-size: var(--t-petit); font-weight: 700; margin-bottom: 4px; }
.d-appel-visuel { border-radius: var(--d-r-carte); overflow: hidden; background: var(--creme); box-shadow: var(--d-ombre); }
.d-appel-visuel img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3.2; }
@media (max-width: 940px) { .d-appel { grid-template-columns: 1fr; } }

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

.d-carrousel { overflow: hidden; }
.d-piste {
  display: grid; grid-auto-flow: column; grid-auto-columns: 100%;
  gap: 24px; transition: transform .5s var(--ease);
}
.d-projet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 2.4vw, 34px); align-items: center; padding: clamp(20px, 2.2vw, 28px); }
.d-projet-photo { border-radius: 18px; overflow: hidden; background: var(--creme); }
.d-projet-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.d-projet-texte { display: grid; gap: 10px; align-content: center; justify-items: start; }
.d-nav { display: flex; gap: 12px; margin-top: 26px; }
.d-fleche {
  width: 48px; height: 48px; display: grid; place-items: center;
  background: var(--blanc); border: 1px solid var(--filet-fort);
  font: inherit; font-size: 1.4rem; cursor: pointer; color: var(--encre);
}
.d-fleche:disabled { cursor: default; border-color: var(--filet); background: transparent; }
@media (max-width: 760px) { .d-projet { grid-template-columns: 1fr; } }

/* --------------------------------------------------------- 07 témoignage */

.d-temoignage { text-align: center; display: grid; gap: 26px; justify-items: center; padding-block: clamp(16px, 2vw, 32px); }
.d-citation p { font-size: clamp(1.35rem, 1rem + 1.5vw, 2.05rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.2; max-width: 24ch; text-wrap: balance; }
.d-citation footer { margin-top: 18px; }
.d-citation b { display: block; }
.d-citation span { display: block; font-size: var(--t-petit); font-weight: 600; }
.d-avatars { display: flex; gap: 12px; }
.d-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--creme); border: 2px solid transparent;
  font: inherit; font-weight: 700; font-size: .85rem; color: var(--encre); cursor: pointer;
  transition: border-color .24s, background-color .24s;
}
.d-avatar[aria-selected="true"] { border-color: var(--encre); background: var(--accent-doux); }

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

/* Grille inégale : la vedette occupe deux rangs, les brèves s'empilent, la
   carte d'inscription bouche le trou. C'est ce déséquilibre qui distingue
   cette grille de celle des métiers. */
/* La vedette occupe sa colonne, les brèves s'empilent dans la leur. Une pile
   plutôt que des rangs partagés : sinon la vedette impose sa hauteur aux rangs
   et les brèves se retrouvent étirées, avec du vide sous chaque titre. */
.d-journal {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 24px); align-items: start;
}
.d-pile { display: grid; gap: clamp(18px, 2vw, 24px); }
.d-billet { display: grid; gap: 12px; align-content: start; }
.d-billet h3 { font-size: var(--t-moyen); }
.d-billet-photo { border-radius: 18px; overflow: hidden; background: var(--creme); margin-bottom: 6px; }
.d-billet-photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.d-billet-texte { display: grid; gap: 10px; }
.d-lettre { background: var(--creme); box-shadow: none; display: grid; gap: 14px; align-content: start; }
.d-lettre form { display: flex; gap: 10px; flex-wrap: wrap; }
.d-lettre input {
  flex: 1 1 190px; padding: 13px 16px; border-radius: 999px;
  border: 1px solid var(--filet-fort); background: var(--blanc);
  font: inherit; color: var(--encre);
}
.d-lettre input::placeholder { color: #5d5750; }
.d-note:empty { display: none; }
.d-note { font-size: var(--t-petit); font-weight: 600; }
@media (max-width: 860px) {
  .d-journal { grid-template-columns: 1fr; }
  .d-billet--vedette { grid-row: auto; }
}

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

.d-accordeon { display: grid; gap: 14px; }
.d-question { padding: 0; }
.d-question summary {
  display: flex; justify-content: space-between; gap: 24px; align-items: baseline;
  padding: 22px clamp(20px, 2.4vw, 30px); cursor: pointer; list-style: none;
  font-size: var(--t-moyen); font-weight: 700;
}
.d-question summary::-webkit-details-marker { display: none; }
.d-question summary::after { content: "+"; color: var(--accent-texte); font-weight: 500; font-size: 1.5em; line-height: 1; }
.d-question[open] summary::after { content: "-"; }
.d-question p { padding: 0 clamp(20px, 2.4vw, 30px) 24px; }