/* ==========================================================================
   AMPIXELWEB — layout.css
   Conteneurs, rythme des sections, en-tête collant, menu mobile, pied de page.
   Chargé sur toutes les pages, après base.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Conteneurs et sections
   -------------------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: var(--section);
}
.section--tight { padding-block: clamp(3.5rem, 7vh, 5.5rem); }
.section--flush-top { padding-top: 0; }

/* Fonds — l'alternance donne le rythme vertical de la page */
.section--parchment { background: var(--parchment); }
.section--sand      { background: var(--sand); }
.section--paper     { background: var(--paper); }
.section--ink       { background: var(--ink); color: var(--on-dark); }
.section--espresso  { background: var(--espresso); color: var(--on-dark); }

.section--ink h1, .section--ink h2, .section--ink h3, .section--ink h4,
.section--espresso h1, .section--espresso h2, .section--espresso h3, .section--espresso h4 {
  color: var(--on-dark);
}

/* En-tête de section : sur-titre + titre + chapô */
.section-head { max-width: 68ch; }
.section-head .eyebrow { margin-bottom: 1.4rem; }
.section-head h2 { margin-bottom: 1.2rem; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head--center .lead { margin-inline: auto; }

/* --------------------------------------------------------------------------
   Déchirure entre deux sections
   La feuille de la section du dessus se déchire par le bas et retombe sur la
   suivante. C'est l'inverse du hero, où c'est le parchemin de la page qui
   monte déchirer la vidéo.

   La bande est posée en PREMIER enfant de la section qui REÇOIT, jamais en
   dernier enfant de celle qui se déchire : `.svcx` et `.cta` coupent leur
   débordement (`overflow: hidden`), une bande qui pendrait sous elles s'y
   ferait rogner. Ici elle tient entièrement dans la section d'accueil, et se
   raccorde sans couture puisqu'elle est peinte de la couleur du dessus.

   Pour l'installer : `<div class="tear tear--<couleur du dessus>">` en tête de
   section, où la couleur est celle de la section PRÉCÉDENTE. La hauteur se
   règle par `--tear-h`, posé sur la section.
   -------------------------------------------------------------------------- */

.tear {
  /* Relais local : laisse `--tear-h` surchargeable depuis la section tout en
     gardant une valeur par défaut, sans répéter le clamp deux fois. */
  --bande: var(--tear-h, clamp(30px, 3.6vw, 54px));
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--bande);
  /* Au-dessus du fond de la section d'accueil et de ses voiles décoratifs
     (.cf__ambience notamment), sous son contenu. */
  z-index: 3;
  pointer-events: none;
}
.tear svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* L'ombre est portée par un filtre SVG appliqué au tracé, pas par un
   `filter: drop-shadow` sur l'élément. La différence est structurelle : un
   drop-shadow CSS déborde d'une dizaine de pixels au-delà de la boîte et vient
   teinter la section voisine, où il se lit comme un filet horizontal en travers
   de la page — d'autant plus visible que les deux fonds sont proches. Un filtre
   SVG, lui, est découpé par le viewport du `<svg>` : il ne peut pas fuir. */

/* La fibre est dessinée en premier et descend plus bas que la feuille : seule
   sa frange dépasse, et c'est elle qui donne l'épaisseur du déchiré. C'est donc
   elle qui porte l'ombre, sinon la feuille projetterait la sienne par-dessus. */
.tear__fibre { fill: var(--tear-fibre, #fffdf7); }
.tear__paper { fill: var(--tear-sheet, var(--parchment)); }

/* Variante montante : c'est la feuille de CETTE section qui monte déchirer la
   précédente, au lieu de la recevoir — comme le parchemin de la page sous le
   hero. La bande passe donc au-dessus de la section (`bottom: 100%`), avec un
   pixel de recouvrement pour ne pas laisser un cheveu de fond à la jonction.
   Les sections traversées ne la rognent pas : elle appartient à la section du
   dessous, et son z-index la fait passer par-dessus la précédente.
   Avec `--up`, la couleur à donner est celle de la section elle-même, et non
   celle du dessus. */
.tear--up {
  top: auto;
  bottom: calc(100% - 1px);
}

/* Couleur de la feuille qui se déchire : fond de la section du DESSUS, ou de
   la section elle-même si la bande porte `--up`. */
.tear--parchment { --tear-sheet: var(--parchment); --tear-fibre: #fffdf7; }
.tear--paper     { --tear-sheet: var(--paper);     --tear-fibre: #fffefb; }
.tear--sand      { --tear-sheet: var(--sand);      --tear-fibre: #f8f1e3; }

/* --------------------------------------------------------------------------
   En-tête du site
   Deux modes :
   - .siteheader--floating (accueil) : masqué, apparaît après le hero
   - par défaut (pages intérieures) : collant en permanence
   -------------------------------------------------------------------------- */

.siteheader {
  position: sticky;
  top: 0;
  z-index: 80;
  background: rgba(242, 235, 221, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  transition: transform 0.5s var(--ease), opacity 0.4s var(--ease);
}

/* Barre principale */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 76px;
  padding-block: 0.9rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--text);
  flex: none;
}
.brand img { width: 30px; height: 30px; }
.brand span {
  font-family: var(--font-logo);
  font-size: 1.25rem;
  letter-spacing: 0.22em;
  text-transform: none;
}

.navlinks { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.1rem); }
.navlinks a {
  position: relative;
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-mid);
  padding-block: 0.4rem;
  transition: color 0.3s var(--ease);
}
.navlinks a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.navlinks a:hover, .navlinks a:focus-visible { color: var(--text); }
.navlinks a:hover::after, .navlinks a:focus-visible::after,
.navlinks a[aria-current="page"]::after { transform: scaleX(1); }
.navlinks a[aria-current="page"] { color: var(--text); }

.nav-actions { display: flex; align-items: center; gap: 0.8rem; flex: none; }

.navbar .btn { padding: 0.85rem 1.4rem; font-size: 0.7rem; }

/* Sélecteur de langue */
.langswitch {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--text-dim);
}
.langswitch a { text-decoration: none; transition: color 0.3s var(--ease); }
.langswitch a[aria-current="true"] { color: var(--text); }
.langswitch a:hover, .langswitch a:focus-visible { color: var(--text); }
.langswitch .sep { width: 1px; height: 0.75rem; background: var(--line-strong); }

/* Mode flottant : l'en-tête n'existe visuellement qu'après le hero */
.siteheader--floating {
  position: fixed;
  top: 0; left: 0; right: 0;
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}
.siteheader--floating.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
  box-shadow: var(--shadow-md);
}

/* Bouton burger */
.burger {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  flex: none;
}
.burger__bars { position: relative; width: 18px; height: 12px; }
.burger__bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--text);
  transition: transform 0.35s var(--ease), opacity 0.25s var(--ease);
}
.burger__bars span:nth-child(1) { top: 0; }
.burger__bars span:nth-child(2) { top: 5px; }
.burger__bars span:nth-child(3) { top: 10px; }
.burger[aria-expanded="true"] .burger__bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bars span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* Panneau mobile */
.mobilenav {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--ink);
  color: var(--on-dark);
  padding: 6rem var(--gutter) 3rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-2%);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), visibility 0.4s;
  overflow-y: auto;
}
.mobilenav.is-open { opacity: 1; visibility: visible; transform: none; }
.mobilenav__close {
  position: absolute;
  top: 1.5rem; right: var(--gutter);
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--parchment);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-sm);
}
.mobilenav__links { display: flex; flex-direction: column; gap: 0.25rem; }
.mobilenav__links a {
  font-family: var(--font-titre);
  font-size: 1.75rem;
  text-decoration: none;
  color: var(--parchment);
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--line-dark);
  transition: color 0.3s var(--ease), padding-left 0.3s var(--ease);
}
.mobilenav__links a:hover, .mobilenav__links a:focus-visible { color: var(--orange); padding-left: 0.6rem; }
.mobilenav__foot { margin-top: 2.5rem; display: grid; gap: 1rem; }
.mobilenav__foot a[href^="tel"] {
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--on-dark-mid);
}

/* --------------------------------------------------------------------------
   Fil d'Ariane
   -------------------------------------------------------------------------- */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.crumbs a { text-decoration: none; transition: color 0.3s var(--ease); }
.crumbs a:hover, .crumbs a:focus-visible { color: var(--ember); }
.crumbs [aria-current] { color: var(--text-mid); }
.crumbs .sep { opacity: 0.5; }

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */

.footer {
  background: var(--ink);
  color: var(--on-dark-mid);
  padding-top: clamp(3.5rem, 8vh, 6rem);
  font-size: 0.94rem;
}
.footer a { text-decoration: none; transition: color 0.3s var(--ease); }
.footer a:hover, .footer a:focus-visible { color: var(--parchment); }

.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: 3.5rem;
}

.footer__brand { display: inline-flex; align-items: center; gap: 0.7rem; margin-bottom: 1.4rem; }
.footer__brand img { width: 32px; height: 32px; }
.footer__brand span {
  font-family: var(--font-logo);
  font-size: 1.3rem;
  letter-spacing: 0.22em;
  text-transform: none;
  color: var(--parchment);
}

.footer__title {
  font-family: var(--font-corps);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--parchment);
  margin-bottom: 1.3rem;
}

.footer__list { display: grid; gap: 0.7rem; }

.footer__contact { display: grid; gap: 0.8rem; margin-top: 1.6rem; }
.footer__contact li { display: flex; align-items: flex-start; gap: 0.7rem; }
.footer__contact svg { flex: none; margin-top: 0.35rem; color: var(--orange); }

.footer__socials { display: flex; gap: 0.6rem; margin-top: 1.6rem; }
.footer__socials a {
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-dark);
  border-radius: 50%;
  color: var(--on-dark-mid);
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
}
.footer__socials a:hover, .footer__socials a:focus-visible {
  border-color: var(--orange);
  color: var(--orange);
  transform: translateY(-2px);
}

.footer__zone {
  padding-block: 2rem;
  border-top: 1px solid var(--line-dark);
  font-size: 0.84rem;
  line-height: 1.9;
  color: rgba(242, 235, 221, 0.48);
}
.footer__zone strong { color: var(--on-dark-mid); font-weight: 500; }

/* Les villes de la zone d'intervention sont maintenant des liens vers leur
   page dédiée (maillage interne). On garde le gris discret du paragraphe :
   ce bandeau doit rester une mention de bas de page, pas un menu. Le
   soulignement n'apparaît qu'au survol pour ne pas hacher la ligne. */
.footer__zone a {
  color: rgba(242, 235, 221, 0.62);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.footer__zone a:hover,
.footer__zone a:focus-visible { color: var(--orange); border-bottom-color: var(--orange); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.8rem;
  border-top: 1px solid var(--line-dark);
  font-size: 0.8rem;
  color: rgba(242, 235, 221, 0.48);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 1.4rem; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 960px) {
  .navlinks { display: none; }
  .burger { display: inline-flex; }
  .navbar .btn--primary { display: none; }
  .langswitch { display: none; }
}

@media (max-width: 720px) {
  .footer__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   BARRE D'ONGLETS MOBILE — le « dock »

   Sur téléphone, la navigation ne se cache plus derrière un burger : les cinq
   destinations du site sont posées en permanence en bas de l'écran, là où le
   pouce arrive. Le devis occupe le rang central et sort de la barre — c'est la
   seule action du site qui rapporte quelque chose, elle a droit à sa pastille.

   Le dock REMPLACE le burger sous 720px (voir plus bas) : deux systèmes de
   navigation concurrents sur un écran de 390px, c'est un de trop. Au-dessus de
   720px il disparaît et le burger reprend la main, inchangé.

   Rien à faire côté JavaScript : l'onglet actif est marqué en dur par
   aria-current="page" dans chaque page, donc il reste juste même sans JS.
   ========================================================================== */

.tabbar { display: none; }

@media (max-width: 720px) {

  .tabbar {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* Sous le panneau mobile (90) et la modale des réalisations, au-dessus de
       l'en-tête collant (80) : le dock ne doit jamais passer derrière la barre
       du haut quand les deux se croisent. */
    z-index: 88;
    padding-inline: 0.7rem;
    /* env() vaut 0 partout sauf sur les écrans à encoche, où il vaut la hauteur
       de la barre gestuelle : le dock s'y pose juste au-dessus au lieu d'être
       coupé par elle. */
    padding-bottom: calc(0.55rem + env(safe-area-inset-bottom, 0px));
    /* La gouttière autour de la barre reste transparente ET traversante : sans
       cela, une bande de 12px en bas de l'écran avalerait les clics. */
    pointer-events: none;
    transition: transform 0.4s var(--ease), opacity 0.3s var(--ease);
  }

  .tabbar__list {
    pointer-events: auto;
    position: relative;
    display: grid;
    /* Le rang central est plus étroit que les autres : « Devis » est le plus
       court des cinq libellés, et les 18 % qu'il rend permettent à
       « Réalisations » de tenir sur une ligne jusqu'à 320px de large. */
    grid-template-columns: 1fr 1fr 0.82fr 1fr 1fr;
    height: 70px;
    /* Espresso et non encre : la barre passe au-dessus du pied de page, et un
       rgba(20,16,11) sur un fond #14100b y disparaissait purement et simplement.
       Deux tons plus clair, elle se détache des deux fonds du site. */
    background: rgba(40, 30, 19, 0.94);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid rgba(242, 235, 221, 0.13);
    border-radius: 24px;
    box-shadow:
      0 18px 40px -20px rgba(20, 16, 11, 0.95),
      0 2px 10px rgba(20, 16, 11, 0.35),
      /* Liseré interne : la lumière accroche l'arête haute, la barre prend
         son épaisseur au lieu de rester un aplat. */
      inset 0 1px 0 rgba(242, 235, 221, 0.09);
    /* La pastille du devis déborde par le haut : surtout pas d'overflow caché. */
    overflow: visible;
    animation: tabbar-in 0.7s var(--ease) 0.2s both;
  }

  @keyframes tabbar-in {
    from { transform: translateY(130%); opacity: 0; }
    to   { transform: none;             opacity: 1; }
  }

  /* ---------- Onglet courant ---------- */

  .tabbar__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 100%;
    min-width: 0;
    text-decoration: none;
    color: rgba(242, 235, 221, 0.55);
    -webkit-tap-highlight-color: transparent;
    transition: color 0.3s var(--ease);
  }

  /* Boîte de 26px : c'est elle qui fixe la hauteur de la colonne, pas le SVG.
     La pastille du devis se cale ensuite sur exactement la même valeur, ce qui
     aligne les cinq libellés sur la même ligne sans un seul pixel de bricolage. */
  .tabbar__ico {
    position: relative;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
  }
  .tabbar__ico svg { width: 22px; height: 22px; }

  /* Halo derrière l'icône active — remplace le soulignement, trop dur ici. */
  .tabbar__ico::before {
    content: "";
    position: absolute;
    inset: -7px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(249, 115, 22, 0.30), transparent 68%);
    opacity: 0;
    transform: scale(0.55);
    transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
  }

  /* Taille indexée sur la largeur d'écran, pas fixe : « Réalisations » fait
     douze caractères pour une colonne de 59px sur un iPhone SE. Avec une taille
     en dur il passait à la ligne ou débordait ; au vw il suit la colonne. */
  .tabbar__label {
    font-family: var(--font-corps);
    font-size: clamp(0.46rem, 2.2vw, 0.55rem);
    font-weight: 500;
    letter-spacing: 0.06em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .tabbar__item[aria-current="page"] { color: var(--orange); }
  .tabbar__item[aria-current="page"] .tabbar__ico::before { opacity: 1; transform: none; }

  .tabbar__item:active { color: var(--parchment); }

  /* ---------- Rang central : le devis ---------- */

  .tabbar__item--fab { color: rgba(242, 235, 221, 0.80); }

  /* Lueur chaude sous la pastille : elle fait remonter le bouton d'un plan et
     réchauffe la barre autour de lui, comme un point de lumière posé dessus. */
  .tabbar__item--fab::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -14px;
    width: 96px;
    height: 96px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(249, 115, 22, 0.28), transparent 62%);
    pointer-events: none;
  }

  .tabbar__fab {
    position: relative;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    /* 58 - 32 = 26 : la pastille occupe dans le flux la même hauteur que la
       boîte d'icône des autres onglets. Elle déborde donc de 32px vers le haut
       sans décaler d'un pixel la ligne des libellés. */
    margin-top: -32px;
    border-radius: 50%;
    background: linear-gradient(155deg, #fdba74, var(--orange) 42%, var(--orange-dk));
    color: #ffffff;
    box-shadow:
      0 0 0 1px rgba(253, 186, 116, 0.45),
      0 0 26px rgba(249, 115, 22, 0.45),
      0 12px 26px -10px rgba(249, 115, 22, 0.9);
    transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
  }
  .tabbar__fab svg { width: 24px; height: 24px; }

  .tabbar__item--fab:active .tabbar__fab { transform: scale(0.93); }

  .tabbar__item--fab[aria-current="page"] { color: var(--orange); }
  .tabbar__item--fab[aria-current="page"] .tabbar__fab {
    box-shadow:
      0 0 0 2px rgba(253, 186, 116, 0.7),
      0 0 30px rgba(249, 115, 22, 0.6),
      0 12px 26px -10px rgba(249, 115, 22, 0.95);
  }

  /* ---------- Effacements ---------- */

  /* Le dock s'efface sous ce qui prend tout l'écran : panneau de navigation
     (il le précède dans le document, d'où le sélecteur frère) et modale des
     réalisations. Sinon il flotterait par-dessus, en travers du contenu. */
  .mobilenav.is-open ~ .tabbar,
  body.has-modal .tabbar {
    opacity: 0;
    transform: translateY(120%);
    pointer-events: none;
  }

  /* Le pied de page se réserve la hauteur du dock : sans cela ses dernières
     lignes finissent dessous. La réserve est posée sur le pied et non sur
     `body`, dont le fond parchemin laisserait une bande claire sous l'encre. */
  .footer { padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }

  /* Le burger cède la place au dock. Le panneau `.mobilenav` reste dans le
     document — il sert toujours entre 721 et 960px — mais plus rien ne
     l'ouvre en dessous de 720px. */
  .burger,
  .hero-nav__burger { display: none !important; }

  /* Le sélecteur de langue, masqué sous 960px parce que le burger occupait la
     place, revient dans l'en-tête : la place est libre. */
  .langswitch { display: inline-flex; }
}

/* Le mot-symbole est large : 1,25rem crénelé à 0,22em fait 180px à lui seul.
   Avec le FR | EN revenu à sa droite, la barre débordait sous 340px et le
   « EN » se faisait rogner par l'overflow-x du body. Il se resserre donc, comme
   il le fait déjà dans la barre du hero. */
@media (max-width: 400px) {
  .navbar { gap: 0.7rem; }
  .brand img { width: 25px; height: 25px; }
  .brand span { font-size: 1rem; letter-spacing: 0.12em; }
}

/* Ancrages : sans cette réserve, un lien vers une ancre en fin de page pose la
   cible sous le dock. */
@media (max-width: 720px) {
  html { scroll-padding-bottom: 92px; }
}

@media (prefers-reduced-motion: reduce) {
  .tabbar__list { animation: none; }
  .tabbar, .tabbar__item, .tabbar__ico::before, .tabbar__fab { transition: none; }
}