/* ===========================================================================
   Navigation — version 10, §5
   ===========================================================================
   Ajoute les deux sous-menus (Prestations, Outils) et les accordeons du menu
   mobile. Ne redefinit rien de assets/style.css : .navlinks, .mobile-menu et
   .mm-cta y sont deja styles, on ne fait que completer.

   Aucun JavaScript. Les tiroirs s'ouvrent au survol ET au focus clavier grace
   a :focus-within, et restent ouverts tant qu'un de leurs liens a le focus.
   Un menu qui ne fonctionne qu'avec un script est un menu qui, un jour, ne
   fonctionne pas.
   =========================================================================== */

.navlinks .nav-sousmenu { position: relative; }

/* Une petite fleche qui annonce qu'il y a quelque chose dessous. */
.nav-sousmenu > a::after {
  content: '';
  display: inline-block;
  width: 0.34em;
  height: 0.34em;
  margin-left: 0.45em;
  vertical-align: 0.18em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.6;
}

.nav-tiroir {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 250px;
  margin: 0;
  padding: 0.5rem;
  list-style: none;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);

  /* Masque sans etre retire du flux : la transition reste possible, et le
     contenu demeure atteignable au clavier une fois le tiroir ouvert. */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 60;
}

/* Bande transparente entre le lien et le tiroir : sans elle, le tiroir se
   referme des que la souris traverse l'interstice. */
.nav-tiroir::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  height: 10px;
}

.nav-sousmenu:hover > .nav-tiroir,
.nav-sousmenu:focus-within > .nav-tiroir {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nav-tiroir li { margin: 0; }
.nav-tiroir a {
  display: block;
  padding: 0.6rem 0.85rem;
  border-radius: 5px;
  font-size: 0.86rem;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
}
.nav-tiroir a:hover,
.nav-tiroir a:focus-visible { background: var(--card); color: var(--ink); }

.nav-tiroir-tout { margin-top: 0.3rem; padding-top: 0.4rem; border-top: 1px solid var(--line); }
.nav-tiroir-tout a { color: var(--ocre); font-weight: 600; }

/* --- Menu mobile : accordeons natifs ------------------------------------- */

/* Le menu est un conteneur flex a HAUTEUR FIXE (position:fixed, inset:64px 0 0 0
   dans style.css). Deux consequences qu'il faut neutraliser ici :

   1. Ses enfants sont retrecis quand le contenu depasse (flex-shrink vaut 1 par
      defaut). Sur un telephone court — iPhone SE, iPhone 8 — les neuf entrees
      du menu se tassaient les unes sur les autres, accordeons fermes.
   2. Rien ne defile : le debordement etait simplement invisible et hors
      d'atteinte.

   On rend donc le menu defilant et ses enfants incompressibles. overscroll-behavior
   empeche le defilement de « traverser » vers la page, sous le menu. */
.mobile-menu {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.mobile-menu > * { flex-shrink: 0; }

.mobile-menu .mm-groupe { width: 100%; }
.mobile-menu .mm-groupe summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.mobile-menu .mm-groupe summary::-webkit-details-marker { display: none; }
.mobile-menu .mm-groupe summary::after {
  content: '+';
  font-family: 'JetBrains Mono', monospace;
  color: var(--ocre);
}
.mobile-menu .mm-groupe[open] summary::after { content: '−'; }
.mobile-menu .mm-groupe summary:focus-visible { outline: 2px solid var(--ocre); outline-offset: 3px; }

/* Les liens d'un groupe sont legerement en retrait : la hierarchie doit se
   voir sans avoir a ouvrir et refermer pour comprendre.

   ---------------------------------------------------------------------------
   display:block N'EST PAS DECORATIF — c'est la correction d'un vrai defaut
   ---------------------------------------------------------------------------
   Les entrees de premier niveau du menu sont des enfants directs du conteneur
   flex : le navigateur les passe automatiquement en bloc. Celles-ci ne le sont
   pas — elles vivent dans le <details> — et restaient donc en « display:inline »,
   la valeur par defaut d'un <a>.

   Ce que cela donnait sur un telephone, une fois « Nos prestations » deplie :
   les huit liens s'ecoulaient comme du texte, DEUX PAR LIGNE, et le
   « padding:1rem 0 » herite de .mobile-menu a — sans effet sur la hauteur de
   ligne d'un element inline — faisait deborder chaque zone cliquable sur celle
   du dessous. Mesure a l'appui : document.elementFromPoint() au centre de
   chaque lien renvoyait un AUTRE lien dans sept cas sur huit. Toucher
   « Peinture interieure » ouvrait « Ravalement de facade ».

   C'est la voie d'acces principale aux sept pages metiers sur mobile. Le defaut
   etait invisible sur ordinateur : au-dessus de 800 px, ce menu n'existe pas.
   --------------------------------------------------------------------------- */
.mobile-menu .mm-groupe > a {
  display: block;
  padding-left: 1.2rem;
  font-size: 0.94em;
  opacity: 0.88;
}

/* --- Refonte du tiroir mobile -------------------------------------------
   Une hiérarchie compacte et tactile : les entrées principales gardent 52 px
   minimum, les sous-liens 44 px, et le bouton d'appel flottant disparaît
   pendant que le menu occupe l'écran. */
@media (max-width: 800px) {
  .mobile-menu {
    gap: 0;
    padding: 1rem clamp(1rem, 5vw, 1.5rem) calc(1.25rem + env(safe-area-inset-bottom));
    background:
      radial-gradient(circle at 92% 4%, rgba(232,162,61,.09), transparent 30%),
      linear-gradient(180deg, #151310 0%, #100f0d 100%);
    scrollbar-width: thin;
    scrollbar-color: rgba(232,162,61,.35) transparent;
  }

  .mobile-menu > a:not(.mm-cta),
  .mobile-menu .mm-groupe summary {
    box-sizing: border-box;
    min-height: 54px;
    margin: 0;
    padding: .8rem .25rem;
    border: 0;
    border-bottom: 1px solid rgba(243,239,230,.11);
    color: var(--ink);
    font-family: 'Inter', sans-serif;
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -.01em;
    display: flex;
    align-items: center;
    text-decoration: none;
  }

  .mobile-menu .mm-groupe {
    border-bottom: 1px solid rgba(243,239,230,.11);
  }
  .mobile-menu .mm-groupe summary {
    width: 100%;
    border-bottom: 0;
  }
  .mobile-menu .mm-groupe summary::after {
    content: '';
    width: 9px;
    height: 9px;
    margin-right: .35rem;
    border-right: 2px solid var(--ocre);
    border-bottom: 2px solid var(--ocre);
    transform: rotate(45deg) translateY(-2px);
    transition: transform .22s ease;
  }
  .mobile-menu .mm-groupe[open] {
    margin: .35rem 0;
    padding: 0 .75rem .65rem;
    border: 1px solid rgba(232,162,61,.2);
    border-radius: 12px;
    background: rgba(232,162,61,.055);
  }
  .mobile-menu .mm-groupe[open] summary::after {
    content: '';
    transform: rotate(225deg) translate(-2px,-2px);
  }
  .mobile-menu .mm-groupe > a {
    box-sizing: border-box;
    min-height: 44px;
    margin: 0;
    padding: .67rem .75rem .67rem 1rem;
    border: 0;
    border-top: 1px solid rgba(243,239,230,.07);
    color: rgba(243,239,230,.78);
    font-family: 'Inter', sans-serif;
    font-size: .9rem;
    font-weight: 500;
    line-height: 1.35;
    opacity: 1;
  }
  .mobile-menu .mm-groupe > a::before {
    content: '—';
    margin-right: .55rem;
    color: var(--ocre);
    opacity: .7;
  }
  .mobile-menu .mm-groupe > a:last-child {
    color: var(--ocre);
    font-weight: 650;
  }

  .mobile-menu .mm-cta {
    box-sizing: border-box;
    min-height: 54px;
    margin: 1rem 0 .25rem;
    padding: .9rem 1rem;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 12px;
    background: linear-gradient(135deg, #f2aa39, #d98a22);
    box-shadow: 0 12px 28px rgba(232,162,61,.2);
    color: #18120b;
    font-family: 'Inter', sans-serif;
    font-size: .98rem;
    font-weight: 750;
    line-height: 1.25;
    text-align: center;
  }

  body.menu-mobile-ouvert .call-fab { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-tiroir,
  .mobile-menu .mm-groupe summary::after { transition: none; }
}

/* ===========================================================================
   Accueil — blocs ajoutes en version 10 (§13)
   =========================================================================== */

.accueil-v10 {
  max-width: 1180px;
  margin: 3rem auto 0;
  padding: 2rem 1.5rem 0;
  border-top: 1px solid var(--line);
}
.accueil-v10-titre {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 1.1rem;
  font-weight: 500;
}
.accueil-v10-liens { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.accueil-v10-liens a {
  display: inline-block;
  padding: 0.55rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.87rem;
  transition: color 0.2s, border-color 0.2s;
}
.accueil-v10-liens a:hover,
.accueil-v10-liens a:focus-visible { color: var(--ink); border-color: var(--ocre); }

.outils-v10 { padding-block: 5rem; }
.outils-v10-grille {
  max-width: 1180px;
  margin: 2.5rem auto 0;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.2rem;
}
.outil-v10 {
  display: block;
  position: relative;
  padding: 1.8rem 1.6rem 1.6rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  text-decoration: none;
  overflow: hidden;
  transition: border-color 0.2s, transform 0.2s;
}
.outil-v10:hover, .outil-v10:focus-visible { border-color: var(--ocre); transform: translateY(-3px); }
.outil-v10-num {
  position: absolute;
  top: 1rem;
  right: 1.2rem;
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 2.4rem;
  color: var(--ocre);
  opacity: 0.16;
  line-height: 1;
}
.outil-v10 h3 { font-size: 1.08rem; margin: 0 0 0.7rem; color: var(--ink); }
.outil-v10 p { font-size: 0.9rem; line-height: 1.6; color: var(--ink-soft); margin: 0 0 1.1rem; }
.outil-v10-lien {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ocre);
}
.outil-v10-lien::after { content: ' →'; }

@media (prefers-reduced-motion: reduce) {
  .outil-v10, .accueil-v10-liens a { transition: none; }
  .outil-v10:hover, .outil-v10:focus-visible { transform: none; }
}

/* ===========================================================================
   Bandeau d'en-tête des pages intérieures — inc/partials/hero-page.php
   ===========================================================================
   .page-hero, .trail et .lumiere .halo sont déjà stylés dans style.css. On
   n'ajoute ici que ce qui manquait : l'enveloppe de section, le fond illustré
   optionnel et la rangée de boutons.
   =========================================================================== */

.hero-page {
  position: relative;
  overflow: hidden;
  padding-block: 1rem 2rem;
}

.hero-page-fond {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.16;
  transform: scale(1.04);
}

/* Sans ce voile, le titre passe sur une zone claire de la photo et devient
   illisible — le contraste ne peut pas dépendre du cadrage de l'image. */
.hero-page-voile {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(21, 18, 15, 0.55) 0%, rgba(21, 18, 15, 0.86) 60%, var(--bg) 100%);
}

.hero-page .page-hero { position: relative; z-index: 2; }

.hero-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  justify-content: center;
  margin-top: 2rem;
}

/* Le fil accepte un élément non cliquable pour la page courante : sans cette
   règle il perdrait ses styles, qui ne visaient que les <a>. */
.trail span.trail-tab { cursor: default; }

@media (prefers-reduced-motion: reduce) {
  .hero-page-fond { transform: none; }
}

/* ===========================================================================
   Cartes de l'accueil devenues cliquables (§13)
   =========================================================================== */

/* Le cadre entier est un lien, pas seulement le titre : c'est ce que tout le
   monde essaie de faire en premier, et une carte qui ne réagit pas au clic
   passe pour cassée. */
.card-lien {
  display: block;
  text-decoration: none;
  color: inherit;
}
.card-lien h3 { color: var(--ink); }
.card-lien:focus-visible { outline: 2px solid var(--ocre); outline-offset: 4px; }

.card-fleche {
  display: block;
  margin-top: 0.9rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent, var(--ocre));
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.card-lien:hover .card-fleche,
.card-lien:focus-visible .card-fleche { opacity: 1; transform: translateX(0); }

/* ===========================================================================
   Section « confiance » — les deux blocs réunis
   ===========================================================================
   Ils étaient séparés par un dégradé et deux couleurs de fond, ce qui coupait
   la page en deux pour un propos qui n'en fait qu'un : voici qui nous fait
   confiance, et voici ce que nous appliquons.
   =========================================================================== */

.confiance-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 2.5rem;
  align-items: center;
}
.confiance-bloc { text-align: center; }
.confiance-bloc .eyebrow { display: block; margin-bottom: 1.6rem; }

/* Un simple trait vertical plutôt qu'un dégradé pleine largeur : il sépare
   sans découper. */
.confiance-separateur {
  width: 1px;
  align-self: stretch;
  min-height: 120px;
  background: linear-gradient(180deg, transparent, var(--line) 22%, var(--line) 78%, transparent);
}

.brand-row { display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: center; align-items: center; }
.brand-row .brand {
  text-decoration: none;
  transition: transform 0.26s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.26s ease;
}
.brand-row .brand:hover,
.brand-row .brand:focus-visible { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.3); }

.brand-plus {
  background: transparent !important;
  color: var(--ocre) !important;
  border: 1px dashed rgba(232, 162, 61, 0.5);
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.brand-plus:hover { border-color: var(--ocre); }

.client-row .client-logo { transition: transform 0.26s ease, border-color 0.26s ease; }
.client-row .client-logo:hover { transform: translateY(-3px); }

@media (max-width: 860px) {
  .confiance-inner { grid-template-columns: 1fr; gap: 2.6rem; }
  .confiance-separateur { width: 100%; min-height: 1px; height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); }
}

@media (prefers-reduced-motion: reduce) {
  .card-fleche, .brand-row .brand, .client-row .client-logo { transition: none; }
  .card-lien:hover .card-fleche { transform: none; }
  .brand-row .brand:hover, .client-row .client-logo:hover { transform: none; }
}

/* ===========================================================================
   Remise à zéro des <nav> imbriqués dans le contenu
   ===========================================================================
   assets/style.css style la BALISE nav elle-même en barre fixe :

       nav { position:fixed; top:0; left:0; right:0; z-index:50;
             height:76px; padding:0 6vw; background:…; backdrop-filter:… }

   C'était sans conséquence tant que la seule balise <nav> du document était
   celle de l'en-tête. Depuis la version 10, le contenu en compte plusieurs —
   fil d'Ariane, sommaire d'article, pagination de la galerie — et chacune
   héritait de ce positionnement : elles venaient se coller en haut de l'écran,
   par-dessus la vraie barre de navigation.

   Le sélecteur « main nav » vaut 0,0,2 contre 0,0,1 : il l'emporte. On ne
   remet à zéro que ce qui vient de cette règle ; l'affichage (flex, grille…)
   reste défini par la classe de chaque composant, qui gagne de toute façon.
   =========================================================================== */

main nav {
  position: static;
  inset: auto;
  z-index: auto;
  height: auto;
  padding: 0;
  background: none;
  backdrop-filter: none;
  border-bottom: 0;
}

/* ===========================================================================
   Bloc d'appel à l'action de fin de page — inc/partials/cta-final.php
   ===========================================================================
   Ces règles vivaient dans assets/prestations.css, chargée seulement par
   l'accueil, la page prestations et la galerie. Les pages ajoutées en version
   10 réutilisent le même bloc et ne chargent pas cette feuille : le fond animé
   et la composition ne s'appliquaient donc pas.

   Elles sont déplacées ici, dans la feuille incluse par l'en-tête partagé,
   donc présente sur toutes les pages publiques. La copie de prestations.css a
   été retirée pour qu'il n'y ait qu'une seule définition à maintenir.

   La pastille .p26-eyebrow, elle, reste dans prestations.css : elle sert aussi
   ailleurs sur cette page-là. Une déclaration de repli est ajoutée plus bas
   pour les pages qui ne chargent pas cette feuille.
   =========================================================================== */

.p26-final {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 8rem 6vw 7rem;
  background: linear-gradient(160deg, #171310, #0b0907 70%);
}
.p26-final::before {
  content: '';
  position: absolute;
  inset: -20%;
  background: conic-gradient(from 0deg, #3E7CB1, #7FA25B, #E8A23D, #D6885E, #3E7CB1);
  filter: blur(120px);
  opacity: 0.18;
  animation: p26spin 22s linear infinite;
}
@keyframes p26spin { to { transform: rotate(360deg); } }

.p26-final-wave { position: absolute; top: 0; left: 0; width: 100%; z-index: 1; line-height: 0; pointer-events: none; }
.p26-final-wave svg { width: 100%; height: auto; display: block; }
.p26-final-inner { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; }
.p26-final h2 {
  font-family: 'Fraunces', serif;
  font-size: clamp(2.15rem, 4.6vw, 3.35rem);
  line-height: 1.06;
  margin: 1rem 0 1.2rem;
}
.p26-final p { color: var(--ink-soft); margin-bottom: 2.2rem; }
.p26-final-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* Repli de la pastille pour les pages qui ne chargent pas prestations.css.
   Les valeurs sont celles de cette feuille : si elle est présente, sa
   déclaration s'applique d'abord et celle-ci ne fait que la confirmer. */
.p26-final .p26-eyebrow {
  align-items: center;
  gap: 0.5rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ocre);
  border: 1px solid rgba(232, 162, 61, 0.4);
  border-radius: 99px;
  padding: 0.5rem 1.1rem;
}
.p26-final .p26-eyebrow .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 8px currentColor; flex: none;
}

@media (prefers-reduced-motion: reduce) {
  .p26-final::before { animation: none; }
}