/* ===========================================================================
   TEC'OFFICE M08 — correctifs transverses
   Defauts presents a l'identique sur plusieurs pages ; corriges une seule fois
   ici plutot que dans chaque <style> de page. Chargee apres le CSS des pages.
   =========================================================================== */

/* Grands chiffres des bandeaux (.bigrow : « 0 facture de depannage », « 1 ligne
   sur la facture », « 100 % consommables inclus »...). La regle .bigrow span,
   prevue pour la legende, attrapait aussi .big-num, plus faible : les chiffres
   sortaient en mono 9 px gris au lieu de 30 a 48 px. Present sur 5 pages. */
.bigrow .big-num {
  display: block;
  margin-top: 0;
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(30px, 3.4vw, 48px);
  line-height: 1;
  letter-spacing: -.03em;
  text-transform: none;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.bigrow.on-dark-row .big-num { color: #fff; }

/* Titres d'appel (bandeau final des pages) : avec un interlignage de .94,
   l'accent d'une capitale de la 2e ligne (« ON DÉCROCHE ») remontait dans la
   1re ligne (« APPELEZ-NOUS »). 1 suffit a laisser passer l'accent. */
.endcta h2 { line-height: 1; }

/* ===========================================================================
   RESPONSIVE — elements communs (passe du 07/10, agent « commun »)
   En-tete, cartes « Poursuivre la visite », pied de page, bouton haut de page,
   pages legales. Borne sous 1280 px, SAUF les defauts que Yann a autorise a
   corriger aussi sur le bureau (07/10 apres-midi) : traits du burger, filet en
   double et coupures du pied, lien « Gerer les cookies », en-tete des ecrans
   courts a l'horizontale. Le dessin du bureau, valide, ne change pas.
   Le menu plein ecran est dans navigation.css.
   =========================================================================== */

/* ---- EN-TETE ------------------------------------------------------------ */
/* le burger, a toutes les largeurs (bureau compris depuis le 07/10 apres-midi) :
   trois traits serres au centre, et non repartis sur toute la hauteur du rond
   (a 1440, 15 px entre deux traits : ceux du haut et du bas frolaient le bord) */
.burger { align-content: center; gap: 4px; }
.burger span { margin: 0; }
/* telephones : l'en-tete s'aligne sur la marge du texte (24 px et non 14) */
@media (max-width: 600px) {
  .hdr .hdr-in { padding: 10px var(--pad); gap: 12px; }
  .hdr.small .hdr-in { padding-top: 7px; padding-bottom: 7px; }
  /* logo : la place restante apres « Devis » et le menu, sans jamais deborder */
  .hdr .logo img, .hdr.small .logo img {
    height: auto; width: min(184px, calc(100vw - 2 * var(--pad) - 160px)); }
  .hdr.small .logo img { width: min(164px, calc(100vw - 2 * var(--pad) - 172px)); }
  .hdr .hdr-act { gap: 8px; }
  .hdr-act .btn { min-height: 44px; padding: 0 16px; gap: 9px; }
  .hdr .burger { width: 44px; height: 44px; }
}
/* tablettes : le logo de 80 px du bureau ecrasait l'en-tete (113 px) */
@media (min-width: 601px) and (max-width: 1279px) {
  .hdr .logo img { height: 60px; }
  .hdr.small .logo img { height: 48px; }
}
/* ecran court a l'horizontale (telephone couche : 390 a 430 px de haut ; toute
   fenetre basse) : l'en-tete colle en haut ne doit pas manger l'ecran.
   Logo plus petit, marges serrees, cibles toujours de 44 px au moins. */
@media (max-height: 500px) and (orientation: landscape) {
  .hdr .hdr-in, .hdr.small .hdr-in { padding-top: 7px; padding-bottom: 7px; }
  .hdr .logo img { height: 38px; width: auto; }
  .hdr.small .logo img { height: 34px; width: auto; }
  .hdr-act .btn { min-height: 44px; padding-top: 0; padding-bottom: 0; }
  .hdr .burger { width: 44px; height: 44px; }
}

/* ---- CARTES « POURSUIVRE LA VISITE » -------------------------------------
   Sous 1280 px : le titre et la fleche sur la meme ligne, en bas de la carte,
   et un voile qui ne fonce que le bas (la photo reste lisible en haut). */
@media (max-width: 1279px) {
  .nxt::after {
    background: linear-gradient(180deg, rgba(10,10,10,.04) 0%, rgba(10,10,10,.14) 30%,
      rgba(10,10,10,.58) 60%, rgba(10,10,10,.9) 100%); }
  .nxt-txt { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 14px; }
  .nxt-txt .tag { grid-column: 1 / -1; justify-self: start; font-size: 10px; }
  .nxt-txt h3 { grid-column: 1; margin-top: 9px; text-wrap: balance; }
  .nxt-txt .rk { grid-column: 2; grid-row: 2; margin-top: 0; }
  .next .sec-tag { font-size: 10px; }
}
@media (max-width: 600px) {
  .next-grid { gap: 14px; }
  .nxt { min-height: clamp(208px, 60vw, 244px); }
  .nxt-txt { left: 18px; right: 18px; bottom: 18px; }
  .nxt-txt .tag { font-size: 10.5px; }
  .nxt-txt h3 { font-size: clamp(20px, 6vw, 24px); line-height: 1.04; }
  .next .sec-tag { font-size: 10.5px; }
}
/* tablettes : deux cartes cote a cote plutot qu'une colonne etiree */
@media (min-width: 601px) and (max-width: 1279px) {
  .next-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2.2vw, 24px); }
  .nxt { min-height: clamp(236px, 30vw, 320px); }
  .nxt-txt { left: 22px; right: 22px; bottom: 22px; }
  /* etiquette sur une ligne (« FIG. 02 — CONTACT & RENDEZ-/VOUS » se coupait a 768) */
  .nxt-txt .tag { letter-spacing: .1em; }
  .nxt-txt h3 { font-size: clamp(20px, 2.6vw, 26px); }
}

/* ---- PIED DE PAGE ------------------------------------------------------- */
/* A toutes les largeurs (bureau compris depuis le 07/10 apres-midi) :
   - un seul filet entre le plan du site et la signature (il y en avait deux,
     a 26-40 px l'un de l'autre) ;
   - les chiffres tabulaires d'Inter elargissaient le tiret : « rendez - vous » ;
   - « Olivetti » ne se coupe plus du reste de la mention (le 07/10 au soir,
     « Groupe ingedus » a quitte cette ligne a la demande de Yann). */
.ftr-sign { border-top: 0; margin-top: 0; }
.fcol p { font-variant-numeric: normal; }
.fcol .fnw { white-space: nowrap; }
/* ... et les lignes s'equilibrent : dans la colonne etroite du bureau (214 px a
   1440), « Olivetti · » restait seul sur sa ligne */
.fcol p:has(> .fnw) { text-wrap: balance; }

/* « Gerer les cookies » (ligne du bas, a droite) : rouvre le panneau des choix
   (consentement.js). Cible de 44 px de haut sans epaissir la ligne. */
/* Le bouton « haut de page » (fixe, 52 px, a clamp(16px,2.2vw,32px) du bord)
   tombait sur la fin du lien entre 768 et 1280 px (23 px de recouvrement a 768).
   La ligne lui reserve sa place a droite, seulement quand il deborde sur la
   marge : 0 a 1440 et au-dela, rien ne bouge sur grand ecran. */
.ftr-bot { align-items: center;
  padding-right: max(0px, calc(clamp(16px, 2.2vw, 32px) + 52px + 14px - var(--pad) - (100vw - min(var(--maxw), 100vw)) / 2)); }
.ftr-bot .fcookies {
  display: inline-flex; align-items: center; min-height: 44px; margin: -14px 0;
  color: #c8c7c1; text-decoration: underline; text-decoration-color: rgba(200,199,193,.4);
  text-underline-offset: 4px; text-decoration-thickness: 1px;
  transition: color .3s var(--ease), text-decoration-color .3s var(--ease);
}
.ftr-bot .fcookies:hover, .ftr-bot .fcookies:focus-visible { color: var(--paper); text-decoration-color: currentColor; }
.ftr-bot .fcookies:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; border-radius: 2px; }

@media (max-width: 1279px) {
  .ftr-bot, .fsocial-lab { color: #8b8a84; }
  .fgroupe-lab, .fsocial-lab, .fsoc, .ftr-bot { font-size: 10px; }
  /* moins de vide entre les cartes et le pied */
  body:has(.next) .ftr { margin-top: clamp(72px, 10vh, 112px); }
}
@media (max-width: 600px) {
  .ftr-in { padding-top: 64px; padding-bottom: 30px; }
  .ftr-top { gap: 34px; padding-bottom: 34px; }
  .ftr-map { gap: 30px; }
  .fcol a { font-size: 15px; }
  .fcol p, .fslog { font-size: 14px; }
  .fgroupe-lab, .fsocial-lab, .fsoc, .ftr-bot { font-size: 10.5px; }
  /* « Nous suivre » sur sa ligne, puis les deux pages l'une sous l'autre */
  .fsocial { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
  .fsocial-lab { margin-bottom: 6px; }
  .ftr-sign { gap: 26px; }
  /* la mention finale ne passe plus sous le bouton « haut de page » */
  .ftr-bot { padding-right: 60px; line-height: 1.7; }
}
/* tablettes : Rubriques a gauche, Contact et Informations empiles a droite
   (sinon Informations retombait seul sous Rubriques, avec un grand vide) */
@media (min-width: 601px) and (max-width: 1100px) {
  .ftr-map { grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; }
  .ftr-map > .fcol:first-child { grid-row: 1 / span 2; }
  .fcol a, .fcol p { font-size: 14px; }
}

/* ---- BOUTON « HAUT DE PAGE » -------------------------------------------- */
/* un liseré clair, a toutes les largeurs : sur le pied sombre, le rond noir
   disparaissait (bureau compris : a 1280, il se devinait a peine) */
.backtop { border-color: rgba(255,255,255,.24); }
@media (max-width: 600px), (max-width: 1279px) and (max-height: 500px) {
  .backtop { width: 44px; height: 44px; font-size: 16px;
    right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}

/* ===========================================================================
   RELECTURE (2e passe « commun », 07/10) — toujours borne sous 1280 px
   =========================================================================== */
@media (max-width: 1279px) {
  /* En-tete compact : a 90 % d'opacite, tout ce qui passait dessous
     transparaissait en fantome (« 57070 Metz », le grand logo du pied,
     le titre « Droit applicable »...) et l'en-tete virait au gris sale
     au-dessus des bandeaux sombres. Il reste papier, plein (et sans flou
     d'arriere-plan, couteux au defilement sur telephone). */
  .hdr { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; }

  /* Cartes « Poursuivre la visite » : l'etiquette sable et le titre blanc
     tombaient parfois sur une zone claire de la photo (chemise blanche,
     casiers bleus). Une ombre portee douce, sans foncer davantage la photo. */
  .nxt-txt .tag, .nxt-txt h3 { text-shadow: 0 1px 2px rgba(0,0,0,.38), 0 2px 16px rgba(0,0,0,.5); }
  /* etude : le filet devant l'etiquette prenait 55 px de large ; l'etiquette
     « FIG. 02 — CONTACT & RENDEZ-VOUS » venait toucher la fleche */
  .nxt-txt .tag::before { width: 22px; transform: none; }
  .nxt-txt .tag { gap: 9px; }
  /* (le « nowrap » du pied, .fcol .fnw, vaut desormais a toutes les largeurs : voir PIED DE PAGE) */
}
@media (max-width: 600px) {
  /* a 360, « FIG. 02 — CONTACT & RENDEZ-VOUS » se coupait au trait d'union
     (« RENDEZ- / VOUS ») : interlettrage resserre, l'etiquette tient sur une ligne */
  .nxt-txt .tag { letter-spacing: .12em; }
}

/* ---- 07/10 apres-midi : controle global ------------------------------------
   Grands titres en capitales serrees : a .92-.96 d'interligne, les accents
   (À, Û, É) entraient dans la ligne du dessus et les virgules tombaient dans
   les capitales du dessous, sur presque toutes les pages. 1.04 suffit.
   (histoire.html garde sa propre regle, plus specifique, a 1.06.) */
.sec-head h2, .pr-h2, .phero h1, .endcta h2 { line-height: 1.04; }

/* Mots composes : jamais coupes au trait d'union en fin de ligne
   (apres-vente, eco-responsable, cout-copie, rendez-vous...). */
.nw { white-space: nowrap; }

/* Etiquette mono du bandeau final des pages legales et de la 404 : elle
   heritait des 15,5 px du paragraphe (.endcta p), 11 px ailleurs. */
.endcta .ctaref { font-size: 11px; line-height: 1.6; letter-spacing: .16em; }