/* Les cabinets Ludovic Moy et S.A.E.C.
   Feuille unique, ecrite pour ce site. Elle reprend la charte d'origine :
   Oswald pour les titres, Noto Sans pour le texte, le bleu 2c6c91 et le rouge
   da1921, le bandeau rouge incline derriere le h1 et la barre sous les h2. */

/* ---------------------------------------------------------------- polices */

@font-face {
  font-family: 'Oswald';
  src: url('/polices/oswald.woff2') format('woff2');
  font-weight: 200 700;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans';
  src: url('/polices/notosans.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
/* MULI A ETE RETIREE le 11/09/2026, apres verification dans le theme d'origine.
   Elle y est chargee depuis Google sur les neuf pages, et une seule regle
   l'emploie : `.brand-title`, qui porte `display:none` au niveau le plus haut
   de la feuille. L'agence telechargeait donc 13 Ko de police, a chaque visite,
   pour un element que personne n'a jamais vu. Nous l'avions rapatriee avec les
   deux autres, et son jeton `--marque` n'etait employe nulle part : le fichier
   partait quand meme avec le site. Un test refuse desormais qu'une police
   declaree ne serve a rien. */

/* ------------------------------------------------------------- les jetons */

:root {
  --bleu: #2c6c91;
  --bleu-fonce: #0d4364;
  --bleu-nuit: #012e48;   /* la couleur du titre de page, relevee sur l'original */
  --bleu-clair: #71afc8;
  --rouge: #da1921;
  --rouge-fonce: #b3141b;
  --texte: #333;
  --texte-doux: #5b5b5b;
  --fond: #fff;
  --fond-clair: #f2f1f1;
  --bordure: rgba(0, 0, 0, .12);
  --titre: 'Oswald', 'Arial Narrow', sans-serif;
  --corps: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --large: 1200px;
  --entete: 83px;        /* la hauteur de la barre fixe, mesuree sur l'original */
  --logo-debord: 34px;   /* de combien le bloc du logo DEPASSE sous la barre */
  --rayon: 0;            /* l'original n'arrondit rien */
  --rayon-doux: 4px;     /* seulement pour nos blocs a nous */
  --ombre: 0 2px 12px rgba(0, 0, 0, .08);
  /* L'opacite du voile pose sur la photo du bandeau. Ce n'est pas un reglage
     de gout : test/bandeaux.test.mjs la lit ICI, la compose avec la luminance
     mesuree de chaque photo, et refuse toute valeur sous laquelle le texte
     blanc descendrait sous 4,5 de contraste. La baisser fait rougir la suite. */
  --voile-bandeau: .55;
}

/* --------------------------------------------------------------- la base */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 16px/1.42857143 var(--corps);
  -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; height: auto; }

a { color: var(--texte); text-decoration: underline; }
a:hover, a:focus { color: var(--rouge); }

h1, h2, h3, h4 {
  font-family: var(--titre);
  font-weight: 700;
  color: var(--texte);
  line-height: 1.2;
  text-transform: uppercase;
}

/* Mesures de l'original : 27,2 px sur 34, marge basse de 35, et la barre rouge
   de 100 x 3 posee 30 px SOUS le titre. */
h2 {
  font-size: 27.2px;
  line-height: 34px;
  margin: 0 0 35px;
  position: relative;
}
h2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -30px;
  width: 100px;
  height: 3px;
  background: var(--rouge);
}
h3 {
  font-family: var(--corps);
  font-weight: 700;
  color: var(--bleu);
  font-size: 1.05rem;
  text-transform: none;
  margin: 2rem 0 .6rem;
}

p { margin: 0 0 1rem; }

.contenant { width: min(100% - 40px, var(--large)); margin-inline: auto; }
/* Les rangees de l'original n'ont que quelques hauteurs de marge : 70, 100, ou
   0 d'un cote quand deux rangees se suivent sans respiration. Ces classes les
   nomment, au lieu de retomber sur une valeur par defaut qui ne colle nulle part. */
.section { padding: 70px 0; }
.section-100 { padding: 100px 0; }
.section-70-0 { padding: 70px 0 0; }
.section-0-70 { padding: 0 0 70px; }
.section-70-50 { padding: 70px 0 50px; }
.section-0 { padding: 0; }
.section-0 .bouton { margin: 0; }
.centre { text-align: center; }
.centre h2::after { left: 50%; transform: translateX(-50%); }
.fond-clair { background: var(--fond-clair); }
.texte { max-width: 46rem; }

.icone { width: 1.1em; height: 1.1em; fill: currentColor; vertical-align: -.18em; margin-right: .4em; }

/* Le lien d'evitement : invisible jusqu'au premier coup de tabulation. */
.saut {
  position: absolute;
  left: -9999px;
  background: var(--bleu-fonce);
  color: #fff;
  padding: .8rem 1.2rem;
  z-index: 100;
}
.saut:focus { left: 1rem; top: 1rem; color: #fff; }

:focus-visible { outline: 3px solid var(--bleu-clair); outline-offset: 2px; }

/* ------------------------------------------------------------- l'en-tete */

/* La barre est FIXE : elle reste en haut quand on descend la page. C'est le
   comportement de l'original, mesure a 83 px de haut. */
#entete {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--entete);
  background: #fff;
  z-index: 50;
}
/* Le contenu commence sous la barre fixe, qui ne prend plus de place dans le flux. */
body { padding-top: var(--entete); }

/* TOUT CE QUI PEUT ETRE VISE PAR UNE ANCRE se cale SOUS la barre fixe.
   Sans cette ligne, le navigateur amene la cible en haut de la fenetre, donc
   DERRIERE la barre : mesure le 11/09/2026, la confirmation « votre message est
   parti » et le bandeau rouge « quelques champs sont a corriger » perdaient
   leurs 83 premiers pixels — exactement ce que le visiteur venait lire.
   Concerne les trois ancres du site : #demande (apres l'envoi d'un formulaire),
   #contenu (le lien « Aller au contenu ») et #entete (le retour en haut).

   La marge compte le DEBORD DU LOGO en plus de la barre : le bloc de la marque
   descend 34 px plus bas que l'en-tete, au-dessus de la colonne de gauche, la
   ou tombent justement le titre de la section et la confirmation. Mesure au
   navigateur : barre a 83, bas du logo a 117. */
[id] { scroll-margin-top: calc(var(--entete) + var(--logo-debord) + 1rem); }

/* Le menu suit le logo immediatement, il n'est pas rejete a droite :
   c'est la disposition de l'original, mesuree (premier lien a x = 248,
   le logo finissant a 252). */
.entete-barre {
  display: flex;
  align-items: stretch;
  gap: 0;
  height: var(--entete);
  width: calc(100% - 20px);
  margin-left: 10px;
}

/* Le bloc du logo deborde de 34 px sous la barre, sur le bandeau. */
.marque { display: flex; align-items: flex-start; text-decoration: none; flex: none; }
.marque-logo { width: 242px; height: auto; }

#bouton-menu {
  display: none;
  background: none;
  border: 0;
  color: var(--bleu-fonce);
  cursor: pointer;
  padding: .4rem;
  align-self: center;
}
#bouton-menu .icone { width: 1.9rem; height: 1.9rem; margin: 0; }
#bouton-menu .icone-fermer { display: none; }
#bouton-menu[aria-expanded="true"] .icone-menu { display: none; }
#bouton-menu[aria-expanded="true"] .icone-fermer { display: inline; }

#menu { display: flex; align-items: stretch; }
#menu ul {
  display: flex;
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 0;
}
#menu li { display: flex; }
#menu a {
  display: flex;
  align-items: center;
  padding: 0 15px;
  color: var(--bleu-fonce);
  text-decoration: none;
  font-size: 16px;
}
#menu a:hover, #menu a:focus { background: var(--fond-clair); color: var(--rouge); }
#menu a.actif { background: var(--bleu); color: #fff; }

/* --------------------------------------------------------------- bandeau */

/* Mesures relevees sur l'original : 450 px de haut, 70 px de marge interne,
   la photo en `fixed` (elle ne bouge pas quand la page descend), calee en haut
   et etiree a la largeur. Le bleu dessous remplit ce que la photo ne couvre pas.

   LE VOILE, pose le 12/09/2026 a la demande de Ludovic. Sans lui, le texte
   blanc du bandeau tenait 2,0 de contraste sur le pixel le plus clair des
   photos, la ou une lecture courante en demande 4,5 : c'etait le design de
   l'agence, et il n'etait pas lisible. Le corriger CHANGE l'aspect du site,
   Ludovic l'a decide en connaissance de cause.

   Deux consequences, et la seconde ne se devine pas : le titre de page passe
   du bleu nuit au BLANC (sur un fond assombri, #012e48 tombe a 2,6 et aucune
   opacite ne le sauve — la seule sortie est de changer sa couleur), et la page
   des mentions legales n'a PAS de voile : sa photo est claire, son titre est
   gris, l'assombrir rendrait ce titre illisible a son tour. */
/* Les distances sont celles de l'original, mesurees une a une : 55 px avant le
   nom du cabinet, puis 60 + 60 + 20 + 15 + 107 + 36 + 42, et 55 px apres.
   Le total fait exactement les 450 px du bandeau d'origine. */
#bandeau {
  position: relative;
  min-height: 450px;
  padding: 55px 0;
  background-color: var(--bleu);
  background-position: 50% 0;
  background-repeat: no-repeat;
  /* Le parallaxe de l'agence : la photo ne bouge pas quand la page descend. */
  background-attachment: fixed;
  background-size: 100% auto;
  color: #fff;
  text-align: center;
}

/* LA PHOTO CHANGE D'UNE PAGE A L'AUTRE, et elle n'est dans aucun HTML : chez
   l'agence, chaque page portait sa propre feuille de style qui posait son fond.
   La classe vient du <body> (vues/page.mjs), le nom de contenu/bandeaux.mjs.
   `cover` sur les deux pages ou l'original recadrait au lieu d'etirer. */
.fond-accueil #bandeau { background-image: url('/images/bandeau-accueil.jpg'); }
.fond-cabinet-bleu #bandeau { background-image: url('/images/bandeau-cabinet-bleu.jpg'); }
.fond-mission-bleu #bandeau { background-image: url('/images/bandeau-mission-bleu.jpg'); }
.fond-mission #bandeau { background-image: url('/images/bandeau-mission.jpg'); }
.fond-contact-bleu #bandeau { background-image: url('/images/bandeau-contact-bleu.jpg'); }
.fond-outils #bandeau {
  background-image: url('/images/bandeau-outils-3.jpg');
  background-size: cover;
}

/* Les mentions legales : seule page dont la photo n'est PAS bleutee, donc seule
   page dont le titre est sombre et ou la ligne du cabinet ne figure pas. C'est
   l'original qui fait ce choix, et il est le bon : sur cette photo claire, du
   blanc ne se lit pas. Le titre est centre en hauteur, comme chez l'agence. */
/* Le voile. En pseudo-element plutot qu'en degrade ajoute a chaque regle
   `.fond-*` : il s'ecrit une fois, et une photo ajoutee demain l'aura sans
   qu'on y pense. `:not(.bandeau-sobre)` laisse les mentions legales dehors. */
#bandeau:not(.bandeau-sobre)::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(1, 46, 72, var(--voile-bandeau));
  pointer-events: none;
}
/* Le contenu passe DEVANT le voile. Sans cette ligne, le voile recouvre le
   texte qu'il est cense rendre lisible. */
#bandeau > .contenant { position: relative; z-index: 1; }

#bandeau.bandeau-sobre {
  display: flex;
  align-items: center;
  padding: 0;
}
.bandeau-sobre .contenant { width: 100%; }
/* Selecteur porte par l'id EXPRES : `#bandeau h1` pose deja une couleur et une
   marge, et une classe seule ne les emporte pas. Gris de l'original, et c'est
   aussi le plus lisible des deux : #333 contraste mieux que le bleu nuit. */
#bandeau.bandeau-sobre h1 {
  font-size: 48px;
  line-height: 60px;
  color: var(--texte);
  margin: 0;
}

/* Le nom du cabinet : Oswald 48/60, blanc. L'esperluette porte un bandeau
   rouge incline derriere elle, c'est la signature de la charte. */
.marque-ligne {
  font-family: var(--titre);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 48px;
  line-height: 60px;
  color: #fff;
  margin: 0;
}
.marque-ligne span {
  position: relative;
  isolation: isolate;
  padding: 0 .12em;
}
.marque-ligne span::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 50px;
  margin-top: -25px;
  background: var(--rouge);
  transform: rotate(-5deg);
  z-index: -1;
}

/* Le titre de la page : Oswald 36/45, bleu nuit. */
/* Blanc depuis le 12/09/2026, et non plus le bleu nuit de l'agence : sur la
   photo assombrie, #012e48 plafonne a 2,6 de contraste. Mesure, pas ressenti. */
#bandeau h1 {
  font-size: 36px;
  line-height: 60px;
  color: #fff;
  margin: 0 0 20px;
}

/* Pas de largeur maximale : le chapeau occupe les 1200 px du contenant, comme
   sur l'original. Mesure du 11/09 sur nos-cabinets : bride a 1000 px il passait
   a six lignes au lieu de cinq et le bandeau gagnait 60 px de haut. */
.bandeau-chapeau {
  margin: 0 auto 20px;
  font-size: 19.2px;
  line-height: 1.43;
  color: #fff;
}
.bandeau-chapeau a { color: #fff; }
#bandeau .bouton { margin: 36px 0 0; }
#bandeau p:last-child { margin-bottom: 0; }

/* Les deux cartes de telephone : 228 px, filet clair de 2 px, 22 px dedans. */
.bandeau-contacts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
  /* 35 et non 15 : cette marge FUSIONNE avec celle du h1 au-dessus, c'est la
     plus grande des deux qui s'applique, pas leur somme. */
  margin-top: 35px;
}
.bandeau-tel {
  margin: 0;
  width: 228px;
  border: 2px solid var(--fond-clair);
  padding: 22px;
  font-size: 20.8px;
  line-height: 1.43;
  text-transform: uppercase;
}
.bandeau-tel a { color: #fff; text-decoration: none; }
.bandeau-tel a:hover, .bandeau-tel a:focus { text-decoration: underline; }
.bandeau-tel strong { font-weight: 400; }
.bandeau-numero { display: block; }

/* ------------------------------------------------------------- le contenu */

.bouton {
  display: inline-block;
  background: var(--rouge);
  color: #fff;
  font-family: var(--corps);
  font-weight: 600;
  text-transform: uppercase;
  padding: 10px 15px;
  border: 0;
  border-radius: 0;
  text-decoration: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 22px;
  margin: .6rem 0 1.6rem;
}
.bouton:hover, .bouton:focus { background: var(--rouge-fonce); color: #fff; }

.deux-colonnes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  gap: 24px;
  align-items: start;
}
/* Les grilles relevees sur l'original : 3 colonnes de 385 (missions, equipes),
   6 de 182 (les etapes), 4 de 284 (references, equipe d'Abbeville), et une
   colonne etroite centree de 809 px pour le business plan. */
.grille-3, .grille-4, .grille-6 { display: grid; gap: 24px; align-items: start; }
.grille-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grille-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grille-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.colonne-etroite { max-width: 809px; margin-inline: auto; }

/* SUR TELEPHONE, LE FOND NE SE FIXE PAS. `background-attachment: fixed` est mal
   supporte par les navigateurs mobiles — iOS Safari le rend de facon erratique,
   l'image se recale pendant le defilement. Non mesure ici faute d'un iPhone
   sous la main : c'est un comportement documente du moteur, et le repli
   (`scroll`) est exactement ce que fait deja tout navigateur qui refuse `fixed`.
   Aucun effet sur l'ordinateur, ou la regle du dessus continue de s'appliquer. */
@media (max-width: 980px) {
  #bandeau { background-attachment: scroll; }
}

@media (max-width: 980px) {
  .grille-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grille-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .grille-3, .grille-4, .grille-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .grille-3, .grille-4, .grille-6 { grid-template-columns: 1fr; }
}

/* Deux largeurs de colonnes relevees sur l'original : 785 / 393 pour le bloc
   de l'application, 588 / 590 pour le reste. */
.colonnes-2-1 {
  display: grid;
  grid-template-columns: minmax(0, 785fr) minmax(0, 393fr);
  gap: 24px;
  align-items: center;
}
@media (max-width: 860px) { .colonnes-2-1 { grid-template-columns: 1fr; } }
.colonnes-1-2 {
  display: grid;
  grid-template-columns: minmax(0, 393fr) minmax(0, 785fr);
  gap: 24px;
  align-items: start;
}
@media (max-width: 860px) { .colonnes-1-2 { grid-template-columns: 1fr; } }

.illustration { text-align: center; }
/* Le visuel de l'application fait 1111x1920 : sans plafond il occupe un ecran
   entier a lui seul. */
.illustration img { max-height: 460px; width: auto; }
.illustration .rond { max-height: none; }

.sous-titre {
  font-family: var(--titre);
  font-size: 1.1rem;
  color: var(--bleu);
  text-transform: none;
  margin-bottom: 1.4rem;
}

/* Les cinq domaines de l'accueil */
.domaines {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1.5rem;
  list-style: none;
  padding: 0;
  margin: 2.5rem 0;
  text-align: center;
}
.domaines a { text-decoration: none; display: block; }
.domaines img { height: 72px; width: auto; }
.domaines span {
  display: block;
  margin-top: .6rem;
  font-family: var(--titre);
  text-transform: uppercase;
  color: var(--bleu);
  font-size: .95rem;
}
.domaines a:hover span, .domaines a:focus span { color: var(--rouge); }

/* Les listes cochees */
ul.coche { list-style: none; padding: 0; margin: 0 0 1.5rem; }
ul.coche li { position: relative; padding-left: 1.8rem; margin-bottom: .6rem; }
ul.coche li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .45em;
  width: .95em;
  height: .95em;
  background: var(--rouge);
  clip-path: polygon(41% 79%, 8% 47%, 0 55%, 41% 96%, 100% 14%, 92% 8%);
}
/* Dans un bloc centre, la coche doit suivre le texte : posee en absolu, elle
   restait collee au bord gauche de la colonne, a dix centimetres de sa ligne. */
.centre ul.coche li { padding-left: 0; }
.centre ul.coche li::before {
  position: static;
  display: inline-block;
  margin-right: .5em;
  vertical-align: -.05em;
}

.clienteles { list-style: none; padding: 0; }
.clienteles li { margin-bottom: .7rem; }
/* L'encadre de la liste des clienteles, comme sur l'original : un filet clair,
   le contenu centre. */
.encadre {
  border: 2px solid var(--fond-clair);
  padding: 30px;
  text-align: center;
  margin: 0 0 24px;
}
/* Un encadre pose sur une rangee GRISE devient invisible : son filet est de la
   couleur du fond. Il reprend alors un fond blanc et un filet qui se voit.
   Trouve le 12/09/2026 en regardant la page des deux dates, pas dans un test. */
.fond-clair .encadre {
  background: var(--fond);
  border-color: var(--bordure);
}

.clienteles strong { text-transform: uppercase; color: var(--bleu); }

.logo-outil { max-width: 240px; }

.badges { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.badge { height: 46px; width: auto; }

/* Les references et les temoignages */
.references {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1.8rem;
  list-style: none;
  padding: 0;
  margin: 2.5rem 0 0;
  justify-items: center;
}
.rond { border-radius: 50%; width: 200px; height: 200px; object-fit: cover; }
.equipe .rond { width: 160px; height: 160px; }

.temoignages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1.8rem;
  margin-top: 2rem;
}
.temoignages blockquote {
  margin: 0;
  padding: 0;
  text-align: center;
  color: var(--texte-doux);
  font-style: italic;
}

/* Une rangee de deux ou trois personnes se CENTRE. La grille `auto-fit` cale
   les elements a gauche et laisse un trou a droite : correct pour une equipe
   complete, bancal pour deux arrivees. */
.equipe-centree {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem 3.5rem;
}

/* La pastille d'initiales : la place d'un portrait pas encore fait. Meme rond,
   meme taille, pour que la rangee ne se torde pas le jour de la seance photo. */
.pastille {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bleu);
  color: #fff;
  font-family: var(--titre);
  font-size: 3rem;
  letter-spacing: .05em;
}

/* La note Google. Elle n'apparait que si les chiffres existent : voir AVIS
   dans contenu/site.mjs, et le refus verifie par test/avis.test.mjs. */
.note-google {
  font-size: 1.15rem;
  margin: 1.2rem 0 0;
}
.note-etoiles { color: #b7791f; letter-spacing: .1em; margin-right: .5rem; }
.note-date { color: var(--texte-doux); font-size: .85rem; }

/* Les avis Google recopies (contenu/avis.mjs) : une carte par avis. */
/* En colonnes (« maconnerie ») et non en grille : chaque carte prend la
   hauteur de son texte, un avis court ne laisse plus de vide a cote d'un long. */
.avis-liste {
  columns: 17rem 4;
  column-gap: 1.2rem;
  margin-top: 1.5rem;
}
.avis-liste > .avis-carte { break-inside: avoid; margin-bottom: 1.2rem; }
.avis-carte {
  margin: 0;
  background: var(--fond-clair);
  border-radius: var(--rayon-doux);
  padding: 1.2rem 1.2rem 1rem;
  display: flex;
  flex-direction: column;
}
.avis-carte blockquote { margin: 0; }
.avis-carte blockquote p { margin: 0 0 .5rem; overflow-wrap: anywhere; }
.avis-etoiles { color: #b7791f; letter-spacing: .1em; margin: 0 0 .5rem; }
.avis-carte figcaption { margin-top: .4rem; }
.avis-auteur { font-weight: 600; color: var(--bleu); }
.avis-date { color: var(--texte-doux); font-size: .9rem; margin-left: .3rem; }
.avis-pied { margin-top: 1.5rem; color: var(--texte-doux); }
#avis-google { scroll-margin-top: 7rem; }

/* La facturation electronique : les deux dates, et les raisons du choix. */
.date-cle {
  font-family: var(--titre);
  font-size: 1.6rem;
  color: var(--rouge);
  margin: 0 0 .6rem;
}
.raisons li { margin-bottom: 1rem; }
.video-source { color: var(--texte-doux); font-size: .85rem; margin-top: .6rem; }

/* L'equipe */
.equipe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 2rem 1rem;
  list-style: none;
  padding: 0;
  margin: 2.5rem 0 0;
  text-align: center;
}
.portrait-nom { font-family: var(--titre); text-transform: uppercase; color: var(--bleu); margin: .8rem 0 0; }
.portrait-fonction { color: var(--texte-doux); font-size: .9rem; margin: 0; }
.cabinet-nom { font-family: var(--titre); text-transform: uppercase; color: var(--bleu); font-size: 1.15rem; }

/* Les missions */
.grille-missions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 2.5rem;
}
.mission h2 { font-size: 1.35rem; }
.illustration-mission { max-width: 120px; margin-bottom: 1rem; }

/* Les etapes de la creation d'entreprise */
.etapes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 2rem;
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}
/* `display: block` est indispensable : l'etiquette « Étape n » est un
   inline-block, elle se rangeait sinon A COTE de l'image, sur la meme ligne. */
.etape img { max-width: 120px; display: block; margin: 0 auto .6rem; }
.etape-numero {
  display: inline-block;
  background: var(--rouge);
  color: #fff;
  text-transform: uppercase;
  font-size: .85rem;
  padding: .25rem .8rem;
  border-radius: var(--rayon);
  margin: .8rem 0 .5rem;
}

/* Les videos et la carte : une affiche, puis le cadre au clic seulement */
.video, .carte {
  position: relative;
  background: var(--bleu-fonce) center / cover no-repeat;
  overflow: hidden;
  margin: 1.5rem 0;
}
.video { aspect-ratio: 16 / 9; }
.carte { min-height: 420px; }
.video iframe, .carte iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-affiche { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* La facade porte l'affiche de la video en fond ; le bouton ne pose qu'un
   voile sombre et le triangle de lecture, comme un lecteur au repos. */
.video-lancer, .carte-lancer {
  position: absolute;
  inset: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  background: rgba(0, 0, 0, .28);
  color: #fff;
  border: 0;
  cursor: pointer;
  font: inherit;
  padding: 1.5rem;
  text-align: center;
}
.carte-lancer { background: linear-gradient(180deg, var(--bleu) 0%, var(--bleu-fonce) 100%); }
.video-lancer:hover, .video-lancer:focus { background: rgba(0, 0, 0, .12); }
/* Un texte lu par les lecteurs d'ecran, invisible a l'oeil. `display: none`
   le retirerait aussi du nom accessible du bouton. */
.hors-ecran {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.carte-lancer:hover, .carte-lancer:focus { background: var(--bleu-fonce); }
.video-lancer .icone, .carte-lancer .icone { width: 4rem; height: 4rem; margin: 0; filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
.video-lancer span, .carte-lancer span { font-family: var(--titre); text-transform: uppercase; }
.video-lancer small, .carte-lancer small { opacity: .85; font-size: .85rem; }

/* ------------------------------------------------------------ actualite
   Refaite le 26/09/2026 sur la FORME du fil expert-infos (pas son contenu) :
   rubriques a gauche, liste au milieu, contact et agenda a droite. Sous
   980 px, une seule colonne : les rubriques passent en rangee au-dessus. */

.actu-fil ol { list-style: none; display: flex; flex-wrap: wrap; gap: .2rem .5rem; margin: 0 0 1.2rem; padding: 0; font-size: .85rem; color: var(--texte-doux); }
.actu-fil li + li::before { content: '›'; margin-right: .5rem; }
.actu-fil li[aria-current] { color: var(--texte); max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.actu-grille { display: grid; grid-template-columns: 200px minmax(0, 1fr) 270px; gap: 2rem; align-items: start; }
.actu-rubriques-titre { font-family: var(--titre); text-transform: uppercase; letter-spacing: .04em; color: var(--bleu-fonce); margin: 0 0 .5rem; }
.actu-rubriques ul { list-style: none; margin: 0; padding: 0; border: 1px solid var(--bordure); }
.actu-rubriques li + li { border-top: 1px solid var(--bordure); }
.actu-rubriques a { display: flex; justify-content: space-between; align-items: center; padding: .65rem .9rem; color: var(--texte); text-decoration: none; background: var(--fond-clair); }
.actu-rubriques a:hover, .actu-rubriques a:focus-visible { background: #e4e8ec; }
.actu-rubriques a.actif { background: var(--bleu); color: #fff; }
.actu-compte { font-size: .8rem; opacity: .75; }
.actu-titre-section { font-size: 1.3rem; color: var(--bleu); border-bottom: 1px solid var(--bordure); padding-bottom: .4rem; margin: 0 0 .5rem; }
.actu-liste { display: grid; gap: 0; }
.actu-item { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: .4rem 1.2rem; padding: 1rem 0; border-bottom: 1px solid var(--bordure); }
.actu-item h3 { margin: 0; font-size: 1.25rem; line-height: 1.2; }
.actu-item h3 a { color: var(--texte); text-decoration: none; }
.actu-item h3 a:hover, .actu-item h3 a:focus-visible { color: var(--bleu); text-decoration: underline; }
.actu-item .actu-texte p { margin: .4rem 0 0; }
.actu-autres { grid-column: 1 / -1; margin: .4rem 0 0; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; }
.actu-date { color: var(--texte-doux); font-size: .9rem; font-style: italic; margin: 0; }
.actu-lien-vignette { display: block; text-decoration: none; }
.actu-vignette { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; aspect-ratio: 16 / 9; width: 100%; color: #fff; font-family: var(--titre); text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; background: linear-gradient(135deg, var(--bleu) 0%, var(--bleu-fonce) 100%); }
.actu-vignette--social { background: linear-gradient(135deg, #3d7f6e 0%, #1f5245 100%); }
.actu-vignette--juridique { background: linear-gradient(135deg, #6b4f8a 0%, #43305a 100%); }
.actu-vignette--gestion { background: linear-gradient(135deg, #8a6a2f 0%, #5a431a 100%); }
.actu-vignette .actu-picto { width: 3rem; height: 3rem; margin: 0; opacity: .9; }
.actu-vignette--grande { aspect-ratio: 32 / 9; margin-bottom: 1rem; }
.actu-vignette--photo { position: relative; overflow: hidden; padding: 0; background: var(--bleu-fonce); border-radius: 4px; }
.actu-vignette--photo .actu-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.actu-lien-vignette:hover .actu-photo { transform: scale(1.04); }
.actu-etiquette { position: absolute; left: .6rem; bottom: .6rem; padding: .2rem .55rem; font-size: .75rem; line-height: 1.4; color: #fff; background: var(--bleu); }
.actu-etiquette--social { background: #1f5245; }
.actu-etiquette--juridique { background: #43305a; }
.actu-etiquette--gestion { background: #5a431a; }
.actu-accueil .actu-carte { text-align: left; }
.actu-cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin: 1.5rem 0 2rem; }
.actu-carte { background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.06); display: flex; flex-direction: column; }
.actu-carte .actu-vignette--photo { border-radius: 0; }
.actu-carte .actu-date, .actu-carte h3, .actu-carte > p { margin-left: 1.1rem; margin-right: 1.1rem; }
.actu-carte .actu-date { margin-top: 1rem; margin-bottom: .3rem; }
.actu-carte h3 { font-size: 1.1rem; line-height: 1.3; margin-top: 0; }
.actu-carte h3 a { color: inherit; text-decoration: none; }
.actu-carte h3 a:hover { text-decoration: underline; }
.actu-carte > p:last-child { margin-bottom: 1.2rem; }
@media (max-width: 900px) {
  /* Sur telephone, les cartes defilent de cote, comme les autres cartes du site : empilees, elles doublaient la hauteur de l'accueil. */
  .actu-cartes { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1rem; margin: 1rem -1rem 1.5rem; padding: 0 1rem .5rem; }
  .actu-carte { flex: 0 0 80%; scroll-snap-align: start; }
  .actu-carte > p:last-child { display: none; }
  .actu-carte h3 { margin-bottom: 1.1rem; }
}
.actu-vignette--grande .actu-picto { width: 4rem; height: 4rem; }
.actu-pagination { display: flex; justify-content: center; gap: 0; margin: 1.5rem 0 0; }
.actu-pagination a, .actu-pagination span { min-width: 2.4rem; padding: .45rem .6rem; text-align: center; border: 1px solid var(--bordure); margin-left: -1px; text-decoration: none; }
.actu-pagination span[aria-current] { background: var(--fond-clair); color: var(--texte-doux); }
.actu-cote { display: grid; gap: 1.5rem; }
.actu-bloc { background: var(--fond-clair); padding: 1rem 1.1rem; }
.actu-bloc p { margin: .4rem 0; }
.actu-bloc-titre { font-size: 1.1rem; color: var(--bleu); margin: 0 0 .5rem; }
.actu-contact { text-align: center; }
.actu-contact .actu-bloc-titre { background: var(--rouge); color: #fff; margin: -1rem -1.1rem .8rem; padding: .6rem 1.1rem; text-align: left; }
.actu-agenda { list-style: none; margin: 0; padding: 0; }
.actu-agenda li { padding: .6rem 0; border-top: 1px solid var(--bordure); }
.actu-agenda li:first-child { border-top: 0; padding-top: 0; }
.actu-agenda-date { font-weight: 700; color: var(--texte); }
.actu-article > .actu-date { margin-bottom: 1rem; }
.actu-partage { display: flex; flex-wrap: wrap; gap: 1rem 2rem; border-top: 1px solid var(--bordure); border-bottom: 1px solid var(--bordure); padding: .7rem 0; margin: 1.5rem 0; }
.actu-imprimer { background: none; border: 0; padding: 0; font: inherit; color: var(--bleu); cursor: pointer; }
.actu-imprimer:hover, .actu-imprimer:focus-visible { text-decoration: underline; }
.actu-suite { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.actu-voisins { margin-top: 2.5rem; }
.actu-sources { border-top: 1px solid var(--bordure); margin-top: 2rem; padding-top: 1rem; font-size: .9rem; }
.actu-sources h2 { font-size: 1.1rem; }
/* La barre rouge du site sous les h2 n'a pas sa place dans les titres de bloc. */
.actu h2::after { content: none; }

@media (max-width: 1100px) {
  .actu-grille { grid-template-columns: 180px minmax(0, 1fr) 230px; gap: 1.5rem; }
  .actu-item { grid-template-columns: minmax(0, 1fr) 160px; }
}
@media (max-width: 980px) {
  .actu-grille { grid-template-columns: minmax(0, 1fr); }
  .actu-rubriques ul { display: flex; flex-wrap: wrap; gap: .4rem; border: 0; }
  .actu-rubriques li + li { border-top: 0; }
  .actu-rubriques a { border: 1px solid var(--bordure); padding: .45rem .8rem; gap: .5rem; }
}
@media (max-width: 560px) {
  .actu-item { grid-template-columns: minmax(0, 1fr); }
  .actu-lien-vignette { grid-row: 1; }
  .actu-vignette--grande { aspect-ratio: 16 / 9; }
}
@media print {
  .actu-rubriques, .actu-cote, .actu-partage, .actu-suite, .actu-voisins, .actu-fil { display: none; }
  .actu-grille { display: block; }
}

/* ------------------------------------------------------------ formulaire */

.formulaire { max-width: 34rem; }
.champ { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1.1rem; }
.champ label { font-weight: 700; font-size: .95rem; }
.champ abbr { color: var(--rouge); text-decoration: none; }
.champ input, .champ textarea {
  font: inherit;
  padding: .65rem .8rem;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--fond-clair);
  color: var(--texte);
  width: 100%;
}
.champ input:focus, .champ textarea:focus { background: #fff; }
.champ-refuse input, .champ-refuse textarea { border-color: var(--rouge); background: #fff; }
.refus { color: var(--rouge-fonce); font-size: .9rem; }
.refus-general {
  background: #fdeaea;
  border-left: 4px solid var(--rouge);
  padding: .8rem 1rem;
  border-radius: var(--rayon);
}
.formulaire-note { font-size: .85rem; color: var(--texte-doux); }
/* Le piege : cache a l'oeil et au lecteur d'ecran, visible d'un robot. */
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulaire-merci {
  background: #eef6ef;
  border-left: 4px solid #3f8f4a;
  padding: 1.2rem 1.4rem;
  border-radius: var(--rayon);
}
.formulaire-merci .icone { width: 1.6rem; height: 1.6rem; fill: #3f8f4a; }

.encart {
  background: #fff;
  border-top: 3px solid var(--rouge);
  padding: 1.5rem;
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
}
.encart-titre { font-family: var(--titre); text-transform: uppercase; color: var(--bleu); }
.appel {
  display: block;
  margin-top: .9rem;
  padding: .7rem .9rem;
  background: var(--fond-clair);
  border-radius: var(--rayon);
  text-decoration: none;
  font-weight: 700;
}
.appel span { display: block; font-weight: 400; font-size: .9rem; color: var(--texte-doux); }
.appel:hover, .appel:focus { background: var(--bleu-fonce); color: #fff; }
.appel:hover span, .appel:focus span { color: #fff; }

.coordonnees { background: var(--fond-clair); padding: 1.5rem; border-radius: var(--rayon); }
.portail { background: var(--fond-clair); padding: 1.8rem; border-radius: var(--rayon); text-align: center; }
.portail h2::after { left: 50%; transform: translateX(-50%); }
/* Votre espace : la mise en page de l'ecran iSuite (une carte, deux panneaux).
   Les onglets sont des radios ; :has() montre l'ecran du cabinet choisi. */
.espace { max-width: 50rem; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.espace-question { margin: 0 .5rem 0 0; font-weight: 700; }
.onglet-choix { position: absolute; opacity: 0; width: 1px; height: 1px; }
.onglet { padding: .45rem 1.1rem; border: 1px solid var(--bordure); border-radius: 999px; cursor: pointer; background: #fff; }
.onglet-choix:checked + .onglet { background: #1f3440; border-color: #1f3440; color: #fff; }
.onglet-choix:focus-visible + .onglet { outline: 3px solid var(--bleu); outline-offset: 2px; }
.ecran {
  flex: 1 1 100%; display: grid; grid-template-columns: 1fr 1fr; margin-top: 1rem;
  background: #fff; border-radius: 8px; box-shadow: 0 10px 40px rgba(20, 40, 60, .12); padding: 1.25rem;
}
.espace:has(#onglet-amiens:checked) .ecran:not([data-cabinet="amiens"]),
.espace:has(#onglet-abbeville:checked) .ecran:not([data-cabinet="abbeville"]) { display: none; }
.ecran-marque { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 1.5rem; border-right: 1px solid #dde3e8; }
.ecran-logo { max-width: 13rem; height: auto; }
.ecran-cabinet { font-weight: 700; margin: 1rem 0 .2rem; }
.ecran-adresse { font-size: .9rem; color: var(--texte-doux); margin: 0; }
.connexion { padding: 1rem 0 1rem 1.25rem; display: flex; flex-direction: column; gap: .9rem; }
.ecran-titre { font-family: Helvetica, Arial, sans-serif; text-transform: none; font-size: 1.6rem; color: #1f3440; margin: 0 0 .4rem; }
.ecran-titre::after { display: none; }
.connexion input { font: inherit; font-size: 16px; width: 100%; padding: .7rem .8rem; border: 1px solid #d9dee3; border-radius: 3px; background: #fff; color: #1f3440; }
.ecran-secret { position: relative; }
.ecran-secret input { padding-right: 2.8rem; }
.oeil { position: absolute; right: .3rem; top: 50%; transform: translateY(-50%); background: none; border: 0; padding: .4rem; cursor: pointer; }
.oeil .icone { width: 1.2rem; height: 1.2rem; fill: #8a959f; margin: 0; }
.oeil[aria-pressed="true"] .icone { fill: #1f3440; }
.ecran-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.ecran-oubli { color: #52606b; text-decoration: none; font-size: .95rem; }
.ecran-oubli:hover, .ecran-oubli:focus { text-decoration: underline; }
.ecran-bouton { font: inherit; font-weight: 700; background: #1f3440; color: #fff; border: 0; border-radius: 3px; padding: .7rem 1.6rem; cursor: pointer; }
.ecran-bouton:hover, .ecran-bouton:focus-visible { background: #0f2230; }
@media (max-width: 640px) {
  .ecran { grid-template-columns: 1fr; }
  .ecran-marque { border-right: 0; border-bottom: 1px solid #dde3e8; padding: 1rem; }
  .connexion { padding: 1rem 0 0; }
  .espace-question { flex-basis: 100%; }
  .ecran-logo { max-width: 8rem; }
  .ecran-cabinet { margin-top: .5rem; }
}

.bloc-contact {
  background: var(--fond-clair);
  border-radius: var(--rayon);
  padding: 2.5rem;
  margin: 3rem 0;
  text-align: center;
}
.bloc-contact h2::after { left: 50%; transform: translateX(-50%); }

/* ------------------------------------------------------------- le pied */

#pied {
  background: var(--bleu-fonce);
  color: #fff;
  padding: 3rem 0 1rem;
  margin-top: 3rem;
}
#pied .contenant {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 2rem;
  align-items: start;
}
#pied a { color: #fff; }
#pied a:hover, #pied a:focus { color: var(--bleu-clair); }
#pied h2 { color: #fff; font-size: 1.1rem; }
#pied h2::after { background: var(--rouge); }
.pied-logo img { max-width: 190px; }
.pied-cabinets { display: grid; gap: 1.6rem; }
.pied-nom { font-family: var(--titre); text-transform: uppercase; color: #fff; margin-bottom: .5rem; }
.pied-nom::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  background: var(--rouge);
  margin-right: .5rem;
}
#pied p { margin: 0 0 .3rem; font-size: .95rem; }
.pied-plan ul { list-style: none; padding: 0; margin: 2rem 0 0; }
.pied-plan li { margin-bottom: .45rem; }
.pied-bas {
  text-align: center;
  margin: 2.5rem 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, .15);
  font-size: .85rem;
  color: rgba(255, 255, 255, .75);
}

#retour-haut {
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  background: var(--rouge);
  color: #fff;
  border-radius: 50%;
  width: 2.8rem;
  height: 2.8rem;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: var(--ombre);
  z-index: 30;
}
#retour-haut.visible { display: flex; }
#retour-haut .icone { width: 1.6rem; height: 1.6rem; margin: 0; }

/* ------------------------------------------------------------- telephone */

/* LE MENU BASCULE AVANT LE RESTE DE LA PAGE, et c'est mesure, pas estime.
   Le menu a huit entrees depuis l'ajout de « Facture électronique » : logo
   compris, il lui faut 1 280 px pour tenir sur une ligne, soit exactement la
   largeur d'un portable courant. En dessous, les libelles se coupaient en deux
   (« Nos / cabinets ») et la barre devenait un pave de deux lignes. Meme serre
   (10 px de marge interne, 15 px de texte), il lui faut 1 164 px MESURES au
   navigateur : le seuil est donc pose a 1 200 px pour le menu seul, quand le
   reste de la mise en page bascule toujours a 980. Un premier essai a 1 150 px
   laissait « Contact » deborder de 13 px, invisible sans la mesure. */
@media (max-width: 1200px) {
  .entete-barre { flex-wrap: wrap; align-items: center; min-height: 0; padding: .6rem 0; }
  .marque-logo { width: 200px; margin-bottom: 0; }
  #bouton-menu { display: block; }
  /* Le menu prend toute la largeur SOUS la barre : un menu deroulant par-dessus
     le bandeau se ferme des qu'on touche l'ecran sur un telephone. */
  #menu { display: none; width: 100%; }
  #menu.ouvert { display: block; }
  #menu ul { flex-direction: column; }
  #menu a {
    padding: .85rem .4rem;
    border-bottom: 1px solid var(--bordure);
  }
}

/* Entre la bascule et un grand ecran, le menu tient sur une ligne mais sans
   marge : on lui serre les entrees plutot que de le laisser se couper. */
@media (min-width: 1201px) and (max-width: 1400px) {
  #menu a { padding: 0 10px; font-size: 15px; }
}
#menu a { white-space: nowrap; }

@media (max-width: 980px) {
  .marque-logo { width: 170px; }
  .section, .section-100, .section-70-0, .section-0-70, .section-70-50 { padding: 40px 0; }
  h2 { font-size: 22px; line-height: 28px; margin-bottom: 28px; }
  h2::after { bottom: -22px; }
  .bandeau-tel { min-width: 0; width: 100%; }

  /* Le nom du cabinet fait 48 px sur un ecran de bureau : sur un telephone il
     prend trois lignes et pousse le bandeau a plus de 700 px de haut. */
  #bandeau { min-height: 0; padding: 40px 0; }
  .marque-ligne { font-size: 30px; line-height: 38px; }
  #bandeau h1 { font-size: 22px; line-height: 30px; margin-bottom: 16px; }
  .bandeau-chapeau { font-size: 17px; }
  .bandeau-contacts { margin-top: 24px; }
  #bandeau .bouton { margin-top: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ------------------------------------------- la page facturation electronique

   Trois blocs qui n'existaient nulle part ailleurs sur le site : un tableau de
   dates, une etiquette d'echeance, et une foire aux questions depliable.
   Tout reste dans la palette de l'original, aucun jeton nouveau.               */

.note {
  border-left: 4px solid var(--bleu);
  background: var(--fond-clair);
  padding: 1rem 1.2rem;
  margin-top: 1.6rem;
}

/* Un tableau large ne doit JAMAIS elargir la page : il defile dans sa boite.
   Le tabindex rend cette boite atteignable au clavier, sinon un visiteur qui
   ne se sert pas d'une souris ne peut pas voir la partie qui depasse. */
.tableau-defilant { overflow-x: auto; }
/* Sur un telephone, la troisieme colonne du tableau sort de l'ecran. Le
   tableau defile bien dans sa boite, mais RIEN ne le dit : on l'ecrit. Cette
   ligne ne s'affiche que quand le tableau ne tient plus. */
.indice-defilement { display: none; font-size: 14px; color: var(--texte-doux); margin-top: .6rem; }
@media (max-width: 760px) { .indice-defilement { display: block; } }

.tableau {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0 0;
  text-align: left;
}
.tableau th, .tableau td {
  padding: .9rem 1rem;
  border-bottom: 1px solid var(--bordure);
  vertical-align: top;
}
.tableau thead th {
  font-family: var(--titre);
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: .04em;
  color: #fff;
  background: var(--bleu-fonce);
  border-bottom: 0;
}
.tableau tbody th { white-space: nowrap; font-weight: 700; color: var(--bleu-nuit); }
.tableau tbody tr:nth-child(even) { background: var(--fond-clair); }

/* L'echeance deja tombee est celle qui doit inquieter : elle porte le rouge de
   la marque, pas un gris de « c'est passe, tant pis ». */
.echeance-passee th { border-left: 4px solid var(--rouge); }
.etiquette {
  display: inline-block;
  background: var(--rouge);
  color: #fff;
  font-family: var(--corps);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: .15rem .5rem;
  white-space: nowrap;
}

.question {
  border-bottom: 1px solid var(--bordure);
  padding: .2rem 0;
}
.question summary {
  font-family: var(--titre);
  font-size: 19px;
  color: var(--bleu-nuit);
  padding: 1rem 2rem 1rem 0;
  cursor: pointer;
  position: relative;
  list-style: none;
}
.question summary::-webkit-details-marker { display: none; }
/* Le chevron est dessine en CSS : une icone de plus, c'est une requete de plus. */
.question summary::after {
  content: '';
  position: absolute;
  right: .4rem;
  top: 1.45rem;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--bleu);
  border-bottom: 2px solid var(--bleu);
  transform: rotate(45deg);
  transition: transform .2s;
}
.question[open] summary::after { transform: rotate(-135deg); top: 1.7rem; }
.question summary:hover, .question summary:focus-visible { color: var(--rouge); }
.question p { margin: 0 0 1.2rem; max-width: 52rem; }

/* Le nom sous un temoignage. Il etait dans nos donnees depuis le debut et ne
   s'affichait pas : une citation sans auteur ne prouve rien. Il est LIE au site
   du client, comme l'est deja son logo deux rangees plus haut. */
.temoignage { margin: 0; }
.temoignage figcaption a { color: inherit; }
.temoignage figcaption {
  display: block;
  margin-top: .8rem;
  font-style: normal;
  font-family: var(--titre);
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--bleu-fonce);
}

/* L'appel de l'accueil vers l'echeance. Il doit se voir sans hurler : le site
   d'un cabinet comptable n'est pas une page de promotion. */
.alerte {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  background: var(--fond-clair);
  border-left: 6px solid var(--rouge);
  padding: 1.4rem 1.6rem;
  margin-top: 2rem;
}
.alerte p { margin: 0; flex: 1 1 22rem; }
.alerte .bouton { margin: 0; flex: none; }

/* Les deux cabinets rappeles en bas de la page facturation electronique.
   Classe a part : `.bandeau-tel` ecrit en blanc pour une photo sombre, ici le
   fond est gris clair. Meme dessin, couleurs du texte courant. */
.contacts-cabinets {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
  margin: 2rem 0;
}
.carte-cabinet {
  margin: 0;
  width: 228px;
  border: 2px solid var(--bleu);
  background: var(--fond);
  padding: 22px;
  font-size: 20.8px;
  line-height: 1.43;
  text-transform: uppercase;
}
.carte-ville { display: block; color: var(--bleu-nuit); }
.carte-cabinet a { color: var(--bleu-fonce); text-decoration: none; font-weight: 700; }
.carte-cabinet a:hover, .carte-cabinet a:focus { color: var(--rouge); text-decoration: underline; }
.carte-numero { display: block; }

/* « Êtes-vous concerné ? » : deux cartes de MEME hauteur, chacune avec sa liste
   et sa conclusion dedans. Avec `.deux-colonnes` (align-items: start), la
   colonne courte laissait un trou et les deux conclusions tombaient a des
   hauteurs differentes : on lisait deux blocs sans rapport. */
.texte-large { max-width: 52rem; }

.profils {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 24px;
  align-items: stretch;
  margin-top: 2rem;
}
.profil {
  display: flex;
  flex-direction: column;
  border: 2px solid var(--fond-clair);
  border-top: 4px solid var(--bleu);
  padding: 26px 30px;
}
.profil-oui { border-top-color: var(--rouge); }
.profil h3 { margin-top: 0; }
.profil ul { list-style: none; padding: 0; margin: 0; }
.profil li { padding: .5rem 0; border-bottom: 1px solid var(--bordure); }
.profil li:last-child { border-bottom: 0; }
.profil li strong { display: block; color: var(--bleu-nuit); }
.profil li em { display: block; font-size: 14px; color: var(--texte-doux); }
/* `margin-top: auto` colle la conclusion en BAS de la carte : les deux se lisent
   alors sur la meme ligne, quelle que soit la longueur des listes. */
.profil-suite {
  margin: auto 0 0;
  padding-top: 1.2rem;
  font-size: 15px;
  color: var(--texte-doux);
}
/* La colonne « concernés » ne porte que deux profils quand l'autre en porte
   cinq : plutot que de laisser un trou, elle dit la regle generale, qui est la
   vraie reponse pour la plupart des dossiers. */
.profil-complement { padding-top: 1rem; margin-bottom: 0; }

/* Le bandeau d'apercu. Il ne s'affiche QUE quand le site tourne ailleurs que
   sur son vrai domaine (SAEC_APERCU=1).

   IL EST EN BAS, ET C'EST LE FRUIT D'UNE ERREUR. Premiere version : en haut,
   au-dessus de la barre fixe. Mesure au navigateur : le bandeau tombait a 127 px
   et la barre a 44, donc le bandeau passait DESSOUS. La cause est que
   `padding-top` sur le corps pousse le flux, alors que la barre est `fixed` et
   l'ignore. La reparer demandait de connaitre la hauteur du bandeau a l'avance,
   or son texte passe de une a trois lignes selon la largeur de l'ecran.

   En bas, la question ne se pose plus : rien n'est fixe de ce cote, une seule
   marge suffit, et un texte qui passe a trois lignes ne recouvre rien. */
#apercu {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  margin: 0;
  padding: .7rem 20px;
  background: #ffd84d;
  color: #3b2c00;
  font-size: 15px;
  line-height: 1.4;
  text-align: center;
  border-top: 3px solid #a8801a;
}
#apercu strong { color: #241b00; }
/* La marge laisse la place au bandeau meme sur trois lignes : sans elle, il
   recouvre la derniere ligne du pied de page. */
body:has(#apercu) { padding-bottom: 7rem; }
/* Le bouton « revenir en haut » se pose juste au-dessus, il ne passe pas
   derriere. */
body:has(#apercu) #retour-haut { bottom: 6rem; }
@media (max-width: 560px) {
  #apercu { font-size: 13px; padding: .6rem 14px; }
  body:has(#apercu) { padding-bottom: 9rem; }
  body:has(#apercu) #retour-haut { bottom: 8rem; }
}

/* La video de l'editeur sur la page de la reforme (26/09/2026) : une colonne
   lisible, pas toute la largeur du contenant. */
.video-cadre { max-width: 40rem; margin: 1.5rem 0; }

/* Mesure au navigateur du 26/09/2026, 375 px : au bas de page, le bouton de
   retour en haut (fixe, 2,8rem a 1,2rem du bord) recouvrait le lien « Mentions
   legales » du pied. La derniere ligne garde donc une marge de sa hauteur. */
.pied-bas { padding-bottom: 4.5rem; }
/* « 56 avis Google » ne se coupe pas en deux lignes sur telephone. */
.note-google a, .note-google .note-nombre { white-space: nowrap; }

/* ------------------------------------------ passe visuelle du 26/09/2026
   Demande d'Axel : les blocs de texte denses deviennent des cartes a picto et
   des parcours en etapes. Memes couleurs, memes polices, meme logo : seule la
   hiérarchie change. Les pictos sont dessines dans vues/morceaux.mjs. */

/* La phrase d'ouverture d'une page, un cran au-dessus du texte courant. */
.accroche {
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--texte);
  max-width: 52rem;
}
.centre .accroche, .section-100.centre .accroche { margin-inline: auto; }
.contenant > p, .deux-colonnes p, .colonnes-2-1 p { line-height: 1.6; }

/* Les cartes a picto */
.cartes {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 2rem;
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.cartes-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.cartes-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.carte-info {
  background: var(--fond);
  border: 1px solid var(--bordure);
  border-top: 3px solid var(--bleu);
  border-radius: var(--rayon-doux);
  box-shadow: var(--ombre);
  padding: 1.4rem 1.4rem .6rem;
  text-align: left;
}
.carte-info h3 { margin: .8rem 0 .5rem; color: var(--bleu-fonce); font-size: 1.1rem; }
.carte-info p { font-size: .95rem; line-height: 1.55; }
.carte-picto, .parcours-picto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: #e6eef3;
  color: var(--bleu);
}
.carte-picto .icone, .parcours-picto .icone { width: 1.6rem; height: 1.6rem; margin: 0; vertical-align: 0; }

/* Le parcours en trois temps : vous deposez, nous traitons, vous consultez. */
.parcours {
  list-style: none;
  padding: 0;
  margin: 2rem 0;
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  counter-reset: none;
}
.parcours-etape {
  position: relative;
  background: var(--fond);
  border-radius: var(--rayon-doux);
  box-shadow: var(--ombre);
  padding: 1.6rem 1.4rem 1rem;
  text-align: center;
}
.parcours-picto { width: 4.5rem; height: 4.5rem; background: var(--bleu); color: #fff; }
.parcours-picto .icone { width: 2.2rem; height: 2.2rem; }
.parcours-numero {
  position: absolute;
  top: 1rem;
  left: 1rem;
  width: 1.8rem;
  height: 1.8rem;
  line-height: 1.8rem;
  border-radius: 50%;
  background: var(--rouge);
  color: #fff;
  font-family: var(--titre);
  font-weight: 700;
}
.parcours-etape h3 { margin: 1rem 0 .5rem; font-family: var(--titre); text-transform: uppercase; font-size: 1.2rem; color: var(--bleu-fonce); }
.parcours-etape p { font-size: .95rem; line-height: 1.55; }
/* La fleche entre deux etapes, dessinee en CSS : aucun fichier de plus. */
.parcours-etape + .parcours-etape::before {
  content: '';
  position: absolute;
  top: 3.4rem;
  left: -20px;
  width: 16px;
  height: 16px;
  border-top: 3px solid var(--rouge);
  border-right: 3px solid var(--rouge);
  transform: rotate(45deg);
}
@media (max-width: 780px) {
  .parcours { grid-template-columns: 1fr; gap: 32px; }
  .parcours-etape + .parcours-etape::before { top: -26px; left: 50%; margin-left: -8px; transform: rotate(135deg); }
}

.bouton-second { background: var(--bleu); }
.bouton-second:hover, .bouton-second:focus { background: var(--bleu-fonce); }

.remarque {
  border-left: 3px solid var(--bleu);
  background: var(--fond-clair);
  padding: .9rem 1.1rem;
}
.direction { text-align: center; color: var(--texte-doux); font-style: italic; margin-top: 1rem; }

/* L'appel de fin de page : un bloc pose, pas un paragraphe de plus. */
.appel-final .contenant {
  background: linear-gradient(135deg, var(--bleu) 0%, var(--bleu-fonce) 100%);
  color: #fff;
  padding: 2.5rem clamp(1.2rem, 4vw, 3rem);
  border-radius: var(--rayon-doux);
}
.appel-final h2 { color: #fff; }
.appel-final p { color: #fff; max-width: 52rem; line-height: 1.6; }
.appel-final.centre p { margin-inline: auto; }
.appel-final .bouton { margin-bottom: 0; }

/* Les temoignages en cartes, et les missions en cartes. */
.temoignage {
  margin: 0;
  background: var(--fond-clair);
  border-radius: var(--rayon-doux);
  padding: 1.4rem 1.2rem 1rem;
}
.temoignage figcaption { font-weight: 600; color: var(--bleu); margin-top: .4rem; }
.mission {
  background: var(--fond);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-doux);
  padding: 1.6rem 1.4rem .6rem;
  box-shadow: var(--ombre);
  height: 100%;
}
.grille-3:has(.mission) { align-items: stretch; }

/* ======================================================== refonte mobile
   26/09/2026, demande d'Axel : « la version mobile doit etre mieux faite ».
   Mesure de depart au navigateur, 375 px : l'accueil faisait 11 101 px de
   haut, une colonne sans fin. Rien n'est RETIRE du HTML : on range (grilles
   de deux, bandes qui defilent au doigt, listes repliees), on reduit ce qui
   est decoratif, et on grossit ce qui se touche. Le bureau (1440) n'est pas
   touche, sauf l'appel de l'en-tete, cache au-dessus de 1200 px. */

/* L'appel de l'en-tete : cache sur ordinateur, ou le menu tient sur une ligne. */
.entete-appel { display: none; position: relative; align-self: center; margin-left: auto; }
.entete-appel summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 44px;
  padding: 0 .9rem;
  background: var(--rouge);
  color: #fff;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 15px;
  border-radius: 999px;
  cursor: pointer;
}
.entete-appel summary::-webkit-details-marker { display: none; }
.entete-appel summary .icone { margin: 0; }
.entete-appel ul {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 60;
  list-style: none;
  margin: 0;
  padding: .4rem;
  min-width: 15.5rem;
  background: #fff;
  border-radius: var(--rayon-doux);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
}
.entete-appel li a {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 52px;
  padding: 0 .8rem;
  color: var(--bleu-fonce);
  text-decoration: none;
  border-radius: var(--rayon-doux);
}
.entete-appel li a:hover, .entete-appel li a:focus { background: var(--fond-clair); color: var(--rouge); }
.entete-appel li + li { border-top: 1px solid var(--bordure); }
.entete-appel li strong { margin-left: auto; white-space: nowrap; }
@media (max-width: 1200px) {
  .entete-appel { display: block; }
  /* LE MENU OUVERT ETAIT TRANSPARENT : il debordait de la barre fixe de 83 px
     sans fond, et ses liens se lisaient par-dessus le titre du bandeau (vu au
     navigateur le 26/09/2026). Il devient un panneau blanc sous la barre, qui
     defile seul si l'ecran est court. */
  #menu.ouvert {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100vh - var(--entete));
    overflow-y: auto;
    background: #fff;
    box-shadow: 0 12px 24px rgba(0, 0, 0, .15);
    padding: 0 16px 8px;
  }
  #menu a { min-height: 48px; font-size: 17px; flex: 1; }
  #bouton-menu { min-width: 48px; min-height: 48px; margin-left: .4rem; }
}

/* Les listes repliables (points forts, missions) : ouvertes dans le HTML, le
   titre reste un titre. Sur ordinateur elles se lisent comme avant. */
details.repliable > summary { list-style: none; cursor: pointer; }
details.repliable > summary::-webkit-details-marker { display: none; }
details.repliable > summary > h2, details.repliable > summary > h3 { display: block; }

/* L'affiche maison, sous la vraie : le titre sur le degrade du site. Le bloc
   isole sa pile : l'affiche maison (-1) passe sous l'image (0), le voile et le
   triangle du bouton passent dessus. */
.video { isolation: isolate; }
.video-affiche { z-index: 0; }
.video-maison {
  z-index: -1;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 1rem 1.2rem;
  background: linear-gradient(135deg, var(--bleu) 0%, var(--bleu-fonce) 100%);
  color: #fff;
  font-family: var(--titre);
  text-transform: uppercase;
  font-size: 1.05rem;
  line-height: 1.3;
}

/* Un champ sous 16 px fait zoomer iOS a chaque toucher. */
input, select, textarea { font-size: 16px; }

@media (max-width: 700px) {
  /* Des marges laterales de 16 px partout, et des titres qui ne debordent pas. */
  .contenant { width: calc(100% - 32px); }
  h1, h2, h3 { overflow-wrap: break-word; }
  .section, .section-100, .section-70-0, .section-0-70, .section-70-50 { padding: 32px 0; }
  .section-70-0, .section-70-50 { padding-bottom: 0; }
  h2 { font-size: 21px; line-height: 27px; margin-bottom: 26px; }
  h2::after { bottom: -16px; width: 64px; }
  h3 { margin-top: 1.4rem; }

  /* Le bandeau : les deux numeros cote a cote, plus en deux paves. */
  #bandeau { padding: 26px 0 28px; }
  .marque-ligne { font-size: 24px; line-height: 32px; }
  .marque-ligne span::before { height: 30px; margin-top: -15px; }
  #bandeau h1 { font-size: 21px; line-height: 27px; margin-bottom: 12px; }
  .bandeau-chapeau { font-size: 16px; line-height: 1.5; }
  .bandeau-contacts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
  .bandeau-tel { width: auto; padding: 0; font-size: 15px; }
  .bandeau-tel a { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 2px 6px; }
  .bandeau-tel .bandeau-numero { font-weight: 700; font-size: 16px; }
  #bandeau .bouton { margin-top: 18px; }

  /* Tout ce qui se touche fait au moins 44 px. */

  /* Le texte courant ne descend pas sous 16 px. */
  .carte-info p, .parcours-etape p, .portrait-fonction, .profil-suite, .profil li em,
  .temoignage p, .avis-carte p, .avis-date, .avis-pied, #pied p, .actu-date, .formulaire-note, .remarque { font-size: 16px; }
  .accroche { font-size: 17px; }
  .actu-sources { font-size: 16px; }

  /* LES CARTES DEFILENT AU DOIGT : une carte et le bord de la suivante, qui
     dit qu'il y en a d'autres. Defilement natif, aucun script. */
  .cartes, .temoignages, .avis-liste {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
    margin-inline: -16px;
    padding: 4px 16px 14px;
  }
  .avis-liste { align-items: start; columns: auto; }
  .avis-liste > .avis-carte { margin-bottom: 0; }
  .cartes > *, .temoignages > *, .avis-liste > * { scroll-snap-align: start; }
  .carte-info { padding: 1.1rem 1.1rem .4rem; }
  .carte-info h3 { margin-top: .6rem; }
  .carte-picto { width: 2.6rem; height: 2.6rem; }

  /* Les parcours en etapes : picto a gauche, texte a droite. */
  .parcours { gap: 22px; }
  .parcours-etape { display: grid; grid-template-columns: 3.4rem 1fr; column-gap: 1rem; text-align: left; padding: 1.1rem 1rem .4rem 1.1rem; }
  .parcours-picto { width: 3.4rem; height: 3.4rem; grid-row: 1 / span 2; }
  .parcours-picto .icone { width: 1.7rem; height: 1.7rem; }
  .parcours-numero { top: .5rem; left: .5rem; width: 1.5rem; height: 1.5rem; line-height: 1.5rem; font-size: .9rem; }
  .parcours-etape h3 { margin: .2rem 0 .3rem; font-size: 1.05rem; }
  .parcours-etape + .parcours-etape::before { top: -19px; }

  /* Les domaines de l'accueil : trois par ligne, icones reduites. */
  .domaines { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem .5rem; margin: 0 0 1rem; }
  .domaines img { height: 44px; }
  .domaines a { min-height: 44px; }
  .domaines span { font-size: .85rem; }

  /* Les illustrations DECORATIVES laissent la place au texte. */
  .illustration, .illustration-mission { display: none; }
  .etape img { max-width: 72px; }

  /* Les logos des clients : quatre sur une ligne. */
  .references { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; margin-top: 1rem; }
  .references .rond { width: 72px; height: 72px; }

  /* L'equipe : deux par ligne. */
  .equipe, .equipe.grille-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem .8rem; margin-top: 1.4rem; }
  .equipe .rond { width: 104px; height: 104px; }
  .pastille { font-size: 2.2rem; }
  .rond { width: 150px; height: 150px; }
  .portrait-nom { font-size: 15px; }

  .encadre { padding: 18px 14px; }
  .clienteles li { margin-bottom: .5rem; }
  .alerte { padding: 1rem 1.1rem; gap: 1rem; }
  .appel-final .contenant { padding: 1.6rem 1.1rem; }
  .bloc-contact { padding: 1.6rem 1.1rem; margin: 2rem 0; }
  .profil { padding: 18px 16px; }
  .carte-cabinet { width: auto; flex: 1 1 140px; padding: 14px; font-size: 16px; }
  .contacts-cabinets { gap: 10px; }
  .grille-missions, .grille-3 { gap: 16px; }

  /* Les longues listes, repliees sur telephone : le titre devient un bouton. */
  details.repliable > summary {
    position: relative;
    min-height: 44px;
    padding-right: 2.4rem;
    display: flex;
    align-items: center;
  }
  details.repliable > summary::after {
    content: '';
    position: absolute;
    right: .6rem;
    top: 50%;
    width: .7rem;
    height: .7rem;
    margin-top: -.5rem;
    border-right: 3px solid var(--rouge);
    border-bottom: 3px solid var(--rouge);
    transform: rotate(45deg);
    transition: transform .2s;
  }
  details.repliable[open] > summary::after { transform: rotate(-135deg); margin-top: -.15rem; }
  details.repliable > summary > h3 { margin: .4rem 0; }
  .mission details.repliable > summary > h2 { margin: .3rem 0 .3rem; font-size: 1.15rem; }
  .mission details.repliable > summary > h2::after { display: none; }
  .mission { padding: .8rem 1rem .2rem; }
  .mission details[open] > ul { margin-top: .8rem; }

  /* Le pied, compact : les deux cabinets, puis le plan en pastilles. */
  #pied { padding: 2rem 0 .5rem; margin-top: 2rem; }
  #pied .contenant { gap: 1.4rem; }
  .pied-logo img { max-width: 140px; }
  .pied-plan h2 { margin-bottom: 1.4rem; }
  .pied-bas { margin-top: 1.4rem; }

  /* La note Google et les badges de l'application restent sur une ligne. */
  .badges { gap: .6rem; }
  .badge { height: 44px; }

  /* La vignette d'un article : une bande, plus un ecran entier. */
  .actu-vignette, .actu-vignette--grande { aspect-ratio: auto; min-height: 56px; flex-direction: row; }
  /* Une photo ne se lit pas en bande de 56 px : elle garde un cadre large. */
  .actu-vignette--photo, .actu-vignette--photo.actu-vignette--grande { aspect-ratio: 2 / 1; min-height: 0; }
}

/* CE QUI SE TOUCHE : 44 px au moins, jusqu'a la tablette comprise (mesure a
   768 px : les liens du pied faisaient 22 px de haut). Au-dessus, la souris. */
@media (max-width: 1024px), (pointer: coarse) {
  .bouton { padding: 11px 18px; min-height: 44px; }
  #menu a { min-height: 48px; }
  .oeil { min-width: 44px; min-height: 44px; }
  /* Les liens poses seuls (logos, signatures, fil, rubriques) : 44 px. */
  .references a { display: block; }
  .temoignage figcaption a, .ecran-oubli { display: inline-flex; align-items: center; min-height: 44px; }
  .actu-fil a { display: inline-flex; align-items: center; min-height: 44px; }
  .actu-rubriques a { min-height: 44px; }
  .actu-fil a { min-width: 44px; justify-content: center; }
  .actu-sources li a { display: flex; align-items: center; min-height: 44px; }
  .pied-plan ul { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1.6rem; }
  .pied-plan li { margin: 0; }
  .pied-plan a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 .9rem;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 999px;
    text-decoration: none;
  }
  .pied-cabinet p { margin-bottom: .5rem; }
  .pied-cabinet a { padding: .5rem 0; }
  .pied-bas a { display: inline-block; padding: .6rem 0; }
  details.repliable > summary { min-height: 44px; display: flex; align-items: center; }
}

@media (max-width: 380px) {
  .entete-appel summary span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .entete-appel summary { padding: 0; width: 44px; justify-content: center; }
}

/* Une bande qui defile, posee dans une colonne de grille, ELARGIT la colonne
   au lieu de defiler : un element de grille a `min-width: auto` par defaut.
   Mesure le 26/09/2026 a 375 px : l'accueil passait a 677 px de large. */
.deux-colonnes > *, .colonnes-2-1 > *, .colonnes-1-2 > *, .grille-3 > * { min-width: 0; }

/* ---- Critique du 30/09/2026 ---- */
/* La note Google dans le bandeau de l'accueil, en blanc sur le bleu. */
.note-google--bandeau { margin: 1rem 0 0; color: #fff; text-align: center; }
.note-google--bandeau a, .note-google--bandeau .note-nombre { color: #fff; }
.note-google--bandeau .note-etoiles { color: #f6c453; }
/* Contact au telephone : les horaires et les appels AVANT le formulaire,
   sinon on les decouvre apres le bouton Envoyer. */
@media (max-width: 900px) { .contact-demande .encart { order: -1; } }
/* Adresses, numeros et fil d'Ariane : 22 et 19 px de haut, trop fins au doigt.
   La marge negative agrandit la zone touchable sans bouger la mise en page. */
.coordonnees a, .cabinet-nom ~ p > a, .actu-fil a, .actu-agenda a, .actu-partage a { display: inline-block; padding: .55rem 0; margin: -.55rem 0; }
/* L'icone et son lien restent cote a cote, meme quand le lien devient un bloc. */
.coordonnees p, .cabinet-nom ~ p { display: flex; align-items: baseline; justify-content: center; gap: .3rem; }
.coordonnees p { justify-content: flex-start; }
.coordonnees p > a, .cabinet-nom ~ p > a { min-width: 0; }
.coordonnees p .icone, .cabinet-nom ~ p .icone { align-self: center; }

/* Les tableaux des articles importes : ils defilent dans leur cadre. */
.actu-tableau { overflow-x: auto; margin: 1rem 0; }
.actu-tableau table { border-collapse: collapse; min-width: 100%; font-size: .95rem; }
.actu-tableau th, .actu-tableau td { border: 1px solid #d6dbe1; padding: .5rem .6rem; text-align: left; vertical-align: top; }
.actu-tableau th { background: var(--fond-clair, #f1f1f1); }
.actu-reprise { font-size: .9rem; color: var(--texte-doux); border-left: 3px solid var(--bleu); padding-left: .8rem; margin-top: 2rem; }
.actu-pagination a, .actu-pagination span { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
.actu-pagination .actu-ellipse { border-color: transparent; }

/* « Voir plus d'avis » : bouton qui deplie le reste des avis (01/10/2026). */
.avis-case { position: absolute; opacity: 0; pointer-events: none; }
.avis-bouton { cursor: pointer; display: table; margin: 0 auto; padding: .7rem 1.4rem; border: 2px solid var(--bleu); color: var(--bleu); font-weight: 600; border-radius: 4px; }
.avis-bouton:hover, .avis-case:focus-visible + .avis-bouton { background: var(--bleu); color: #fff; }
/* Le bouton du haut est rendu APRES la liste par l'ordre flex du conteneur ;
   ferme : « Voir plus » sous les huit avis ; ouvert : « Afficher moins » en bas. */
#avis-google .contenant { display: flex; flex-direction: column; }
#avis-google .avis-liste { order: 1; }
#avis-google .avis-case + .avis-bouton { order: 2; }
#avis-google .avis-bouton-bas { order: 2; display: none; }
#avis-google .avis-pied { order: 3; }
.avis-cache, .avis-fermer { display: none; }
.avis-case:checked ~ .avis-liste .avis-cache { display: block; }
.avis-case:checked + .avis-bouton { display: none; }
#avis-google .avis-case:checked ~ .avis-bouton-bas { display: table; }
.avis-case:checked ~ .avis-bouton-bas .avis-fermer { display: inline; }

/* Creation d'entreprise : la premiere phrase a la taille du texte, sur une
   seule ligne sur ordinateur (demande d'Axel, 02/10/2026). */
@media (min-width: 1024px) { .une-ligne { white-space: nowrap; } }

/* Facturation electronique, 02/10/2026 (demande d'Axel) : le texte va jusqu'au
   bout de la ligne, et aucun paragraphe n'est ecrit plus petit que les autres. */
.texte-large { max-width: none; }
.profils-un { grid-template-columns: 1fr; }
.profil-suite, .profil li em { font-size: 16px; }
.question p { max-width: none; }
.tableau thead th, .video-source { font-size: 16px; }
.indice-defilement { font-size: 16px; }
/* 02/10/2026 (Axel) : le texte va jusqu'au bout de la ligne, partout. */
.accroche, .texte { max-width: none; }
.appel-final p { max-width: none; }