/* ==========================================================================
   Savoir-faire
   ========================================================================== */

/* --------------------------------------------------------------------------
   Titre de page
   -------------------------------------------------------------------------- */

.titrage {
  padding: var(--section-y) var(--cadre);
  border-bottom: 1px solid var(--filet-sombre);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 44px;
  flex-wrap: wrap;
}

.titre-page {
  font: 400 62px/1.04 var(--titre);
  color: var(--texte-sombre-1);
  max-width: 820px;
  letter-spacing: -.01em;
  text-wrap: pretty;
}

.titrage__sous {
  font: 400 clamp(21px, 2.2vw, 30px)/1.3 var(--titre);
  color: var(--or-profond);
  max-width: 22ch;
  margin-top: 14px;
}

.titrage__lead {
  font: 500 17px/1.8 var(--courant);
  color: var(--texte-sombre-2);
  max-width: 360px;
}

/* --------------------------------------------------------------------------
   Blocs texte + photo
   -------------------------------------------------------------------------- */

.duo {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  padding: var(--section-y) var(--cadre);
}
.duo--clair  { background: var(--blanc); border-bottom: 1px solid var(--filet-clair); }
.duo--sombre { border-bottom: 1px solid var(--filet-sombre); }

.duo__texte {
  flex: 1;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}
.duo__texte--large { flex: 1.1; }

/* Les sur-titres de cette page sont un cran plus larges que ceux de l'accueil. */
.duo__surtitre,
.methode__surtitre,
.zone__surtitre {
  font-size: 12px;
  letter-spacing: .2em;
}

.titre-section {
  font: 400 40px/1.1 var(--titre);
  color: var(--texte-sombre-1);
  text-wrap: pretty;
}
.titre-section--clair { color: var(--texte-clair-1); }

.duo__corps {
  font: 500 17px/1.8 var(--courant);
  color: var(--texte-sombre-1);
}
.duo__corps--clair { color: var(--texte-clair-1); }

.duo__detail {
  font: 500 16px/1.85 var(--courant);
  color: var(--texte-sombre-2);
}

.duo__photo {
  flex: 1 1 340px;
  min-width: 0;
  min-height: 440px;
  object-fit: cover;
  object-position: center 55%;
  display: block;
}
.duo--sombre .duo__photo {
  min-height: 460px;
  object-position: center;
}

/* --------------------------------------------------------------------------
   Bande des matières
   -------------------------------------------------------------------------- */

.bande-matieres {
  padding: 26px var(--cadre);
  border-bottom: 1px solid var(--filet-sombre);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 26px;
  background: var(--charbon-clair);
}

.bande-matieres__nom   { font: 500 13px/1 var(--courant); letter-spacing: .22em; color: var(--texte-sombre-1); }
.bande-matieres__point { font: 500 13px/1 var(--courant); color: var(--or-profond); }

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

.methode {
  background: var(--zinc);
  padding: var(--section-y) var(--cadre);
  border-bottom: 1px solid var(--filet-clair);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.methode__surtitre { margin-bottom: 10px; }
.methode__titre { margin-bottom: 34px; }

.etape {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  align-items: baseline;
  padding: 22px 0;
  border-top: 1px solid var(--filet-clair);
}
.etape--derniere { border-bottom: 1px solid var(--filet-clair); }

.etape__num {
  font: 500 12px/1.4 var(--courant);
  letter-spacing: .1em;
  color: var(--or-fonce);
  width: 34px;
  flex: none;
}

/* Cette feuille est chargée après base.css : sans ce rappel, la couleur
   ci-dessus recouvrirait le `transparent` du reflet et le dégradé resterait
   invisible derrière le texte. */
.etape__num.reflet-chiffre { color: transparent; }

.etape__nom {
  font: 400 21px/1.2 var(--titre);
  color: var(--texte-clair-1);
  width: 280px;
  flex: none;
}

.etape__desc {
  font: 500 14.5px/1.75 var(--courant);
  color: var(--texte-clair-2);
  flex: 1;
  min-width: 240px;
}

/* --------------------------------------------------------------------------
   Bande photo pleine largeur

   Une respiration entre le héros et le premier bloc de texte. Elle ne bouge
   pas : c'est le seul élément fixe de la page, et c'est voulu — l'œil se pose
   dessus avant d'entrer dans le récit.
   -------------------------------------------------------------------------- */

/* En desktop, l'escalier reste dans sa colonne au sein du bloc « parcours » :
   la bande ne sert qu'au mobile, où la mise en deux colonnes n'existe pas. */
.bande-photo {
  margin: 0;
  display: none;
}

.bande-photo img {
  width: 100%;
  height: clamp(240px, 42vw, 420px);
  object-fit: cover;
  object-position: center;
  display: block;
}

/* --------------------------------------------------------------------------
   Zone d'intervention
   -------------------------------------------------------------------------- */

.zone {
  padding: var(--section-y) var(--cadre);
  border-bottom: 1px solid var(--filet-sombre);
  display: flex;
  gap: 60px;
  flex-wrap: wrap;
  align-items: center;
}

.zone__texte {
  flex: 1.2;
  min-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.zone__corps {
  font: 500 17px/1.8 var(--courant);
  color: var(--texte-sombre-1);
}

.zone__carte {
  flex: 1 1 380px;
  min-width: 320px;
}

.carte {
  width: 100%;
  height: auto;
  display: block;
}

/* Les libellés de la carte sont dimensionnés en unités de viewBox : ils
   rétrécissent avec elle. En dessous de 900 px la carte descend sous le texte
   et occupe toute la largeur, ce qui les maintient lisibles. */
.carte__ville   { font: 500 13px var(--courant); fill: var(--texte-sombre-1); }
.carte__km      { font: 500 11px var(--courant); fill: var(--or-profond); }
.carte__atelier { font: 600 14px var(--courant); fill: var(--laiton); }
.carte__mention { font: 500 11px var(--courant); fill: var(--texte-sombre-3); }

/* --------------------------------------------------------------------------
   Manifeste et assurance décennale
   -------------------------------------------------------------------------- */

.manifeste-bloc { border-bottom: 1px solid var(--filet-sombre); }

.manifeste {
  position: relative;
  min-height: 520px;
  padding: 76px 48px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 26px;
  overflow: hidden;
  background: var(--charbon);
}

/* La photo est en dessous, le dégradé par-dessus : même rendu qu'un fond CSS,
   mais l'image se charge en différé. */
.manifeste__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.manifeste::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(14, 14, 13, .95) 0%, rgba(14, 14, 13, .82) 46%, rgba(14, 14, 13, .42) 100%);
}
.manifeste > *:not(.manifeste__photo) { position: relative; z-index: 1; }

.manifeste__surtitre {
  font: 500 12px/1 var(--courant);
  letter-spacing: .2em;
  color: var(--laiton);
}

.titre-manifeste {
  font: 400 46px/1.14 var(--titre);
  color: var(--texte-sombre-1);
  max-width: 840px;
  text-wrap: pretty;
}

.manifeste__ligne {
  font: 500 17px/1.8 var(--courant);
  color: var(--texte-sombre-2);
  max-width: 620px;
}

.decennale {
  background: var(--zinc);
  padding: 26px var(--cadre);
  display: flex;
  gap: 20px 38px;
  flex-wrap: wrap;
  align-items: baseline;
}

.decennale__titre {
  font: 600 10px/1 var(--courant);
  letter-spacing: .2em;
  color: var(--or-fonce);
  flex: none;
  padding-top: 3px;
}

.decennale__texte {
  font: 500 13.5px/1.7 var(--courant);
  color: var(--texte-clair-2);
  flex: 1;
  min-width: 280px;
  max-width: 88ch;
}

/* --------------------------------------------------------------------------
   Questions fréquentes
   -------------------------------------------------------------------------- */

.faq {
  padding: var(--section-y) var(--cadre);
  border-bottom: 1px solid var(--filet-sombre);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 4vw, 72px);
}

.faq__intro {
  flex: 0 1 300px;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq__titre {
  font: 400 clamp(28px, 3vw, 40px)/1.08 var(--titre);
  color: var(--texte-sombre-1);
  text-wrap: pretty;
}

.faq__aide {
  font: 500 14px/1.8 var(--courant);
  color: var(--texte-sombre-3);
  max-width: 30ch;
}

.faq__tel {
  font: 600 22px/1.3 var(--courant);
  color: var(--texte-sombre-1);
  white-space: nowrap;
  margin-top: 6px;
}
.faq__tel a { color: inherit; }

.faq__liste {
  flex: 1 1 520px;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--filet-sombre);
}

.faq__item { border-top: 1px solid var(--filet-sombre); }

/* La question est un vrai bouton : dépliable au clavier, état annoncé. */
.faq__question {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 24px 0;
  width: 100%;
  font: inherit;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
}

.faq__num      { font: 400 15px/1.5 var(--titre); color: var(--or-profond); flex: none; width: 34px; }
.faq__intitule { font: 400 21px/1.32 var(--titre); color: var(--texte-sombre-1); flex: 1; text-wrap: pretty; transition: color .25s; }
.faq__signe    { font: 500 22px/1 var(--courant); color: var(--or-profond); flex: none; width: 22px; text-align: center; }

.faq__question:hover .faq__intitule { color: var(--or-profond); }

.faq__reponse {
  overflow: hidden;
  animation: deplie .42s cubic-bezier(.22, .8, .3, 1) both;
}
.faq__reponse[hidden] { display: none; }

.faq__texte {
  display: block;
  font: 500 15.5px/1.9 var(--courant);
  color: var(--texte-sombre-2);
  max-width: 66ch;
  padding: 0 0 30px 54px;
}

@keyframes deplie {
  from { max-height: 0; opacity: 0; }
  to   { max-height: 340px; opacity: 1; }
}

/* --------------------------------------------------------------------------
   Photos des blocs texte + photo

   Elles ne bougent pas : ni glissement ni fondu. Le texte du bloc garde son
   entrée, la photo est là dès le départ — c'est elle qui tient la page
   pendant que le texte arrive.

   Il faut donc les sortir explicitement de l'entrée commune : elles sont
   enfants d'un groupe [data-apparition] et hériteraient sinon de son fondu.
   -------------------------------------------------------------------------- */

.duo[data-apparition] > .duo__photo {
  opacity: 1;
  transform: none;
  transition: none;
}

.duo__photo {
  box-shadow: 0 16px 38px rgba(0, 0, 0, .3);
}

/* En desktop, la photo occupe une colonne fixe plutôt que la moitié du bloc :
   elle pesait trop lourd face au texte. En mobile elle reprend toute la
   largeur, comme avant. */
@media (min-width: 681px) {
  .duo {
    align-items: stretch;
    /* Le débord de deux pixels de la photo est recoupé ici, pas ailleurs. */
    overflow: hidden;
  }

  .duo__photo {
    flex: 0 1 400px;
    /* La photo occupe toute la hauteur de la section, bord à bord : les marges
       négatives annulent le rembourrage vertical du bloc. `height: auto` est
       indispensable — sans elle, l'attribut height du balisage sert de repli
       et l'étirement ne s'applique pas.

       Les six pixels supplémentaires absorbent tout arrondi sous-pixel : le
       rembourrage vaut 83,2 px à 1280 et 93,6 px à 1440, valeurs non entières
       dont l'arrondi laissait une fine bande claire sous la photo. Le débord
       est recoupé par l'overflow du bloc, la photo est simplement rognée de
       six pixels — invisible à l'œil. */
    height: auto;
    min-height: 0;
    align-self: stretch;
    margin-block: calc(-1 * var(--section-y) - 6px);
  }
}

/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 680px) {
  /* Le titre reste sous la lampe, pas dedans — mais sans creuser un vide :
     le dégagement suit de près la hauteur du faisceau. */
  .titrage--lampe { padding-top: 114px; }
  /* La barre est décollée de l'en-tête : à ras, elle se confondait avec le
     filet de la barre de navigation. L'écart barre / titre reste le même. */
  .titrage--lampe .lampe { height: 118px; top: 26px; }
  .titrage { gap: 18px; }
  .titrage__sous { margin-top: 6px; }

  .titre-page,
  .titre-section,
  .titre-manifeste {
    font-size: 31px;
    line-height: 1.1;
  }

  .faq__titre,
  .devis-clair__titre {
    font-size: 24px;
    line-height: 1.14;
  }

  /* La phrase du manifeste n'est plus un titre : elle se lit, elle ne pèse
     plus comme un intitulé. */
  .titre-manifeste { font-size: 25px; line-height: 1.28; }
  .manifeste { padding: 56px 22px; min-height: auto; }

  /* Photos : elles occupaient plus de 440 px de haut, soit la moitié de
     l'écran pour une illustration. */
  .duo { gap: 26px; }
  .duo__photo {
    min-height: 0;
    height: 215px;
    object-position: center 45%;
  }
  /* La photo du four ferme la section, bord à bord.

     Elle passe après le texte sans toucher à l'ordre du balisage, occupe
     toute la largeur — les marges négatives annulent le rembourrage de la
     section — et son bord inférieur devient celui du bloc : plus rien ne la
     suit, pas même une ombre, qui trahirait un décollement. */
  .duo--sombre .duo__photo {
    order: 1;
    flex-basis: 100%;
    height: 260px;
    /* La règle de base impose 460 px : une hauteur minimale l'emporte sur une
       hauteur fixe, il faut donc la neutraliser explicitement. */
    min-height: 0;
    width: auto;
    margin: 0 calc(var(--cadre) * -1) calc(var(--section-y) * -1);
    box-shadow: none;
  }

  /* Les numéros d'étape brillent l'un après l'autre, pas tous ensemble :
     .reflet-chiffre décale par nth-of-type, inopérant ici puisque chaque
     numéro est le premier <p> de son étape. Le décalage se prend donc sur
     l'étape elle-même. */
  .etape:nth-child(3) .reflet-chiffre { animation-delay: .45s; }
  .etape:nth-child(4) .reflet-chiffre { animation-delay: .9s; }
  .etape:nth-child(5) .reflet-chiffre { animation-delay: 1.35s; }
  .etape:nth-child(6) .reflet-chiffre { animation-delay: 1.8s; }
  .etape:nth-child(7) .reflet-chiffre { animation-delay: 2.25s; }

  /* La méthode reprend la disposition des huit domaines de l'accueil :
     grand numéro à gauche, intitulé sur la même ligne, description en
     dessous. Sans bascule — les cinq étapes se lisent d'affilée. */
  .etape {
    align-items: baseline;
    gap: 2px 14px;
    padding: 20px 0;
  }
  .etape__num {
    font: 400 34px/1 var(--titre);
    letter-spacing: 0;
    width: 52px;
    flex: none;
  }
  .etape__nom {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    font-size: 20px;
  }
  .etape__desc {
    flex: 1 1 100%;
    min-width: 0;
    padding-left: 66px;
    font-size: 13px;
    line-height: 1.6;
    margin-top: 4px;
  }

  /* Zone d'intervention : la carte se glisse entre le titre et le paragraphe.
     `display: contents` fait remonter les enfants du bloc de texte au rang de
     la section, ce qui permet de les ordonner avec la carte. */
  .zone { flex-direction: column; gap: 18px; }
  .zone__texte { display: contents; }
  .zone__surtitre { order: 1; }
  .zone .titre-section { order: 2; }
  /* La section passe en colonne : le `flex: 1 1 380px` du desktop, qui fixait
     une largeur, impose ici une hauteur de 380 px à un dessin qui en fait
     184 — d'où le grand vide sous la carte. On rend sa hauteur au contenu. */
  .zone__carte {
    order: 3;
    min-width: 0;
    flex: 0 0 auto;
    /* Le dessin a besoin d'air de part et d'autre : collé au titre et au
       paragraphe, il se lit comme un bloc de texte de plus. */
    margin: 14px 0 16px;
  }
  .zone__corps { order: 4; }

  /* Bande photo : l'escalier passe en tête de section, pleine largeur, et
     quitte la colonne du bloc « parcours » pour ne pas s'y répéter. */
  .bande-photo { display: block; }
  .bande-photo img { height: 300px; }
  .duo--clair .duo__photo { display: none; }

  /* Questions fréquentes : numéros au même gabarit que les autres listes. */
  .faq__num {
    font-size: 28px;
    line-height: 1;
    width: 44px;
  }
  .faq__intitule { font-size: 19px; }
  /* La réponse s'aligne sur l'intitulé, pas sur le numéro : 44 px de gabarit
     plus les 20 px d'écart de la ligne de question. */
  .faq__texte { padding-left: 64px; }
}

/* --------------------------------------------------------------------------
   Restitution de la version ordinateur — voir la note de base.css.
   -------------------------------------------------------------------------- */

@media (min-width: 681px) {
  /* L'escalier se détache sur le blanc du bloc : l'ombre portée y traçait une
     bande grise sous la photo. */
  .duo--clair .duo__photo { box-shadow: none; }

  /* Le filet de séparation du bloc clair est un gris très pâle — 14 % de noir
     sur blanc. Posé entre une section blanche et la section sombre qui suit,
     il ne sépare rien que le contraste ne sépare déjà, et se lit comme une
     bande claire sous la photo. */
  .duo--clair { border-bottom: 0; }

  /* Le reflet sur les numéros d'étape a été demandé pour le mobile : ils
     reprennent ici leur or plein. */
  .etape__num.reflet-chiffre {
    color: var(--or-fonce);
    background-image: none;
    animation: none;
  }

}