/* bsf-info.fr — la mise en page du site. Les couleurs, les textes, le verre et les composants viennent de la charte
   (bsf.css, recopié tel quel) ; cette feuille ne pose que des positions, des largeurs et des grilles, en var(--jeton).
   Le thème suit l'appareil : la classe .clair est posée sur <html> par trois lignes de script, dans le gabarit. */

@font-face{font-family:Manrope;font-weight:500;font-display:swap;src:url(polices/Manrope-500.woff2) format("woff2")}
@font-face{font-family:Manrope;font-weight:600;font-display:swap;src:url(polices/Manrope-600.woff2) format("woff2")}
@font-face{font-family:Manrope;font-weight:800;font-display:swap;src:url(polices/Manrope-800.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-display:swap;src:url(polices/IBMPlexSans-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:500;font-display:swap;src:url(polices/IBMPlexSans-500.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:600;font-display:swap;src:url(polices/IBMPlexSans-600.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-display:swap;src:url(polices/IBMPlexMono-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-display:swap;src:url(polices/IBMPlexMono-500.woff2) format("woff2")}

/* D'une page à l'autre, un fondu (View Transitions) : rien ne se déplace. Les navigateurs qui l'ignorent changent de page comme avant. */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:var(--duree-survol)}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}

/* Le fond de la charte sur toute la fenêtre : il ne défile pas avec la page. */
html.site{min-height:100%;font-size:var(--corps-taille);line-height:var(--corps-interligne);background-attachment:fixed;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html.site::before{position:fixed}
html.site body{margin:0;min-height:100vh;display:flex;flex-direction:column}
.site-main{flex:1 0 auto}
.site p{margin:0}
.site h1,.site h2,.site h3{margin:0;color:var(--texte);text-wrap:balance}
.site img,.site svg{max-width:100%;height:auto}
.site a:focus-visible,.site button:focus-visible,.site input:focus-visible,.site textarea:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
@media (prefers-reduced-motion:reduce){html.site{scroll-behavior:auto}}

/* Le lien d'évitement : visible au clavier seulement. */
.site-saut{position:absolute;left:var(--space-4);top:-100px;z-index:30;padding:var(--densite-marge) 14px;border-radius:var(--radius-m);background:var(--surface-relief);color:var(--texte)}
.site-saut:focus{top:var(--space-4)}

/* La barre du haut : la carte en verre de la charte, collée en haut de la fenêtre. */
.site-tete{position:sticky;top:0;z-index:20;padding:var(--space-3) var(--space-4) 0}
.site-tete .pl-barre{max-width:calc(100rem - 2 * clamp(var(--space-4),4vw,4rem) + 2 * var(--space-4));margin:0 auto}
.site-tete .pl-logo img{display:block}
.site-tete .site-nav{flex:1 1 auto}
.site-tete-geste{margin-left:auto;white-space:nowrap}
/* Le numéro d'urgence, dans la barre du haut avant le bouton : « Une urgence ? », le numéro paraît au survol (il est déjà
   écrit dans le bandeau d'urgence de l'accueil et dans l'appel de chaque page) ; l'icône seule sous l'écran de bureau.
   Un toucher appelle. */
.site-tete-tel{margin-left:auto;display:inline-flex;align-items:center;gap:var(--space-2);white-space:nowrap;min-height:var(--densite-controle);padding:0 var(--space-2);border-radius:var(--radius-m);color:var(--texte);text-decoration:none;font-weight:600;transition:background-color var(--duree-survol) ease-out}
.site-tete-tel:hover{background:var(--survol)}
.site-tete-tel .ico{color:var(--action)}
.tel-urgence{color:var(--texte-second);font-weight:500}
.site-tete-tel+.site-tete-geste,.site-tete-tel+.site-tete-assist,.site-tete-assist+.site-tete-geste{margin-left:var(--space-2)}
/* Le bouton d'assistance : le symbole de BSF à la croix, puis « Assistance » ; les arcs font un demi-tour au survol. */
.site-tete-assist{display:inline-flex;align-items:center;gap:var(--space-2);white-space:nowrap;flex:none}
.site-tete-assist[aria-current="page"]{background:var(--actif)}
.symbole-assist{flex:none;display:block}
.symbole-assist .arcs{transform-origin:24px 24px;transition:transform var(--duree-survol) ease-out}
a:hover>.symbole-assist .arcs,a:focus-visible>.symbole-assist .arcs{transform:rotate(180deg);transition-duration:calc(4 * var(--duree-survol))}
@media (prefers-reduced-motion:reduce){.symbole-assist .arcs{transition:none}a:hover>.symbole-assist .arcs{transform:none}}
/* Là où la barre manque de place, le bouton ne garde que le symbole ; juste au-dessus du téléphone et à
   l'entrée de l'écran de bureau, « Accueil » s'efface aussi (le logo y mène). */
@media (40rem <= width < 62rem), (64rem <= width < 74rem){.site-tete-assist{width:var(--densite-controle);padding:0;justify-content:center}.site-tete-assist>span{display:none}}
@media (40rem <= width < 46rem), (64rem <= width < 67rem){.site-nav a:first-child{display:none}}
.site-tete-geste{white-space:nowrap}
.rdv-court{display:none}
.tel-numero{display:inline-block;max-width:0;overflow:hidden;margin-left:calc(-1 * var(--space-2));opacity:0;transition:max-width var(--duree-survol) ease-out,opacity var(--duree-survol) ease-out,margin-left var(--duree-survol) ease-out}
.site-tete-tel:hover .tel-numero,.site-tete-tel:focus-visible .tel-numero{max-width:9em;margin-left:0;opacity:1}
@media (prefers-reduced-motion:reduce){.tel-numero{transition:none}}
.site-theme{width:var(--densite-controle);padding:0;flex:none;margin-left:var(--space-2)}
.site-theme .ico-lune{display:none}
html.clair .site-theme .ico-lune{display:block}
html.clair .site-theme .ico-soleil{display:none}
.site-barre-bas{display:none}

/* La colonne du site : la largeur d'une vue de la charte, centrée. */
/* La colonne du site suit la largeur de l'écran, jusqu'à 100 rem ; les marges grandissent avec la fenêtre. */
.site-colonne{max-width:100rem;margin:0 auto;padding:0 clamp(var(--space-4),4vw,4rem);display:flex;flex-direction:column;gap:var(--space-6)}
.section-tete{display:flex;flex-direction:column;gap:var(--space-4)}
.section-tete .pl-eti{margin-bottom:calc(-1 * var(--space-2))}
.section-corps{display:flex;flex-direction:column;gap:var(--space-6);min-width:0}
.section-corps:empty{display:none}
.site-lisible{max-width:calc(var(--largeur-texte) + 2 * var(--space-6))}
.site-section{padding:var(--space-8) 0 0}
.site-section.serre{padding-top:var(--space-6)}

.site-entete{padding:var(--space-8) 0 0}
.site-entete .site-colonne{gap:var(--space-4)}

/* L'apparition d'une section quand elle entre dans la fenêtre : l'opacité seule, en duree-survol × 3 ; sans script ou si l'appareil demande moins d'animations, tout est visible d'emblée. */
html.js .apparait{opacity:0;transition:opacity calc(var(--duree-survol) * 3) ease-out}
html.js .apparait.vu{opacity:1}
@media (prefers-reduced-motion:reduce){html.js .apparait{opacity:1;transition:none}}

/* Les textes : affiche, chapeau, prose, étiquettes. Les tailles sont celles des styles de texte de la charte. */
.affiche{font-family:var(--famille-titre);font-weight:var(--affiche-graisse);font-size:var(--affiche-taille);line-height:var(--affiche-interligne);letter-spacing:var(--affiche-approche);max-width:24em}
.affiche .vert,.vert{color:var(--action)}
.chapeau{font-size:var(--titre-3-taille);line-height:var(--corps-interligne);color:var(--texte-second);max-width:var(--largeur-texte);text-wrap:balance}
/* Les lignes : une phrase centrée se partage en lignes égales, un paragraphe ne finit jamais sur un mot seul. */
.site p,.site li{text-wrap:pretty}
.site-section>.section-grille>.section-tete .prose p,.delais-note,.urgence-texte p{text-wrap:balance}
.prose{display:flex;flex-direction:column;gap:var(--space-4);max-width:var(--largeur-texte)}
.prose b,.points b{font-weight:600}
.petit{font-size:var(--corps-dense-taille);line-height:var(--corps-dense-interligne)}
.suite a{display:inline-flex;align-items:center;gap:var(--space-2);font-weight:600;text-decoration:none}
.suite a:hover{text-decoration:underline}
.gestes{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}
.pl-btn.grand{min-height:44px;padding-left:18px;padding-right:18px;font-size:var(--corps-taille)}
.pl-btn .ico{flex:none}

/* L'accroche de l'accueil : le texte à gauche, la scène à droite, sur la hauteur de la fenêtre ou presque. */
.site-entete-accueil{padding-top:var(--space-8)}
.accroche-grille{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--space-8);align-items:center;min-height:min(56vh,30rem)}
.accroche-texte{display:flex;flex-direction:column;gap:var(--space-4)}
.site-entete-accueil .chapeau{max-width:34em}
/* L'étiquette de l'accroche, au corps du texte courant : le métier puis la zone, chacun sur sa ligne, la première chose lue. */
.accroche-eti{font-size:var(--corps-taille);line-height:var(--corps-interligne)}
.accroche-eti>span{display:block}
.accroche-eti .point{display:none}
@media (width >= 40rem){.site-entete-accueil .affiche .vert{white-space:nowrap}}

/* La scène : des plaques de verre en profondeur autour de la console ; elle suit la souris (script de l'accueil).
   Les plaques flottent lentement ; quand l'appareil demande moins d'animations, rien ne bouge que la ligne de surveillance. */
.scene{position:relative;height:28rem;perspective:1500px}
.groupe{position:absolute;left:50%;top:50%;width:640px;height:520px;margin:-260px 0 0 -320px;transform-style:preserve-3d;transform:rotateY(var(--ry,-12deg)) rotateX(var(--rx,4deg));transition:transform .9s cubic-bezier(.2,.7,.2,1);scale:var(--echelle,.82)}
.plaque{position:absolute;display:grid;place-items:center;color:var(--action);transform:translateZ(var(--z,0px));animation:flotte var(--d,8s) var(--r,0s) ease-in-out infinite}
.plaque svg{width:46%;max-height:64%;filter:drop-shadow(var(--lueur-trace))}
.groupe .console{position:absolute;left:125px;top:52px;width:390px;transform:translateZ(70px);animation:flotte 9s -1.5s ease-in-out infinite}
@keyframes flotte{0%,100%{translate:0 0}50%{translate:0 -7px}}
@media (prefers-reduced-motion:reduce){.plaque,.groupe .console{animation:none}.groupe{transition:none}}

/* La console du cabinet : une carte en verre qui montre ce que BSF Sync surveille, sur un cabinet fictif. */
.console{padding:18px 20px;display:flex;flex-direction:column;gap:var(--space-3);max-width:30rem;justify-self:end;width:100%}
.console-ligne .trace-fond{opacity:.28}
.console-ligne .trace-balai{stroke-dasharray:180 1000;stroke-dashoffset:180;animation:balai 2.8s linear infinite}
@keyframes balai{to{stroke-dashoffset:-1000}}
@media (prefers-reduced-motion:reduce){.console-ligne .trace-balai{animation-duration:var(--tour-reduit)}}
.console-tete{display:flex;align-items:center;gap:var(--space-3)}
.console-tete>div{flex:1 1 auto;min-width:0}
.console-nom{font-family:var(--famille-titre);font-weight:600;font-size:var(--titre-3-taille);line-height:var(--titre-3-interligne)}
.console-maj{display:inline-flex;align-items:center;gap:6px;font-size:var(--donnee-taille);white-space:nowrap}
.console-phrase{color:var(--action)}
.console-ligne{display:block;width:100%;height:24px;color:var(--action)}
.console-lignes{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}
.console-lignes li{display:flex;align-items:center;gap:var(--space-3);min-height:var(--densite-ligne);padding:6px 0;border-top:1px solid var(--filet-ligne);font-size:var(--corps-dense-taille);line-height:var(--corps-dense-interligne)}
.console-lignes li .pl-etat{flex:none}
.console-pied{font-size:var(--donnee-taille);line-height:var(--donnee-interligne);font-family:var(--famille-donnee)}

/* Le symbole qui travaille : les arcs tournent en tour-symbole, le serveur ne bouge jamais. */
.symbole{flex:none}
.symbole .arcs{transform-origin:24px 24px;animation:tour var(--tour-symbole) linear infinite}
@keyframes tour{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.symbole .arcs{animation-duration:var(--tour-reduit)}}


/* Le bento : des cartes de tailles différentes, sur six colonnes. */
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--space-4)}
.bento>.carte{grid-column:span 2}
.bento>.carte.bento-large{grid-column:span 4}

/* Le sommaire d'une page longue : les onglets de page de la charte, collés sous la barre du haut. */
.site-onglets{position:relative;z-index:15;margin-top:var(--space-6);padding:0 var(--space-4)}
.site-onglets .pl-onglets-page{max-width:calc(100rem - 2 * clamp(var(--space-4),4vw,4rem) + 2 * var(--space-4));margin:0 auto;display:flex;gap:2px;padding:6px;overflow-x:auto;scrollbar-width:none}
.site-onglets .pl-onglets-page::-webkit-scrollbar{display:none}
.site-onglets a{white-space:nowrap;padding:var(--densite-marge) 12px;border-radius:var(--radius-m);color:var(--texte-second);text-decoration:none;transition:background-color var(--duree-survol) ease-out,color var(--duree-survol) ease-out}
.site-onglets a:hover{background:var(--survol);color:var(--texte)}
.site-onglets a[aria-current="true"]{background:var(--actif);color:var(--texte);font-weight:600}
.site-section[id]{scroll-margin-top:calc(var(--densite-controle) + 2 * var(--space-3) + 24px)}

/* Le rail : une série de cartes qui coulisse de côté, aimantée carte par carte ; les flèches n'apparaissent que si la série déborde. */
.rail{display:flex;flex-direction:column;gap:var(--space-3);min-width:0}
.rail-tete{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.rail-fleches{display:none;gap:var(--space-2)}
.rail.deborde .rail-fleches{display:flex}
.rail-fleche{width:var(--densite-controle);padding:0}
.rail-fleche:disabled{color:var(--texte-second);border-color:var(--filet);cursor:default;background:transparent}
.rail-piste{display:grid;grid-auto-flow:column;grid-auto-columns:min(100%,22rem);column-gap:var(--space-4);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:2px;padding:2px 2px var(--space-3);scrollbar-width:thin;scrollbar-color:var(--filet-controle) transparent}
.rail-piste>*{scroll-snap-align:start;height:auto}
.rail-piste:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--radius-m)}
.rail .carte .pl-t2{font-size:var(--titre-3-taille);line-height:var(--titre-3-interligne)}

/* Les cartes : la carte en verre de la charte, marge 16 × 18 px. */
.carte{padding:16px 18px;display:flex;flex-direction:column;gap:var(--space-3);min-width:0;transition:background-color var(--duree-survol) ease-out}
.carte:not(.doux):not(.vertdoux):hover{background:color-mix(in srgb,var(--verre),var(--survol))}
.carte .pl-t2{font-size:var(--titre-2-taille)}
/* Une carte à icône : l'icône et le titre sur la même ligne, le texte dessous sur toute la largeur ; pas de hauteur perdue. */
.carte:has(>.carte-ico){display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;row-gap:var(--space-2);align-content:start}
.carte:has(>.carte-ico)>*{grid-column:1 / -1}
.carte:has(>.carte-ico)>.carte-ico{grid-column:1}
.carte:has(>.carte-ico)>.carte-ico+h3{grid-column:2;align-self:center}
.carte-ico{flex:none;display:inline-flex;width:40px;height:40px;align-items:center;justify-content:center;border-radius:var(--radius-m);background:var(--actif);color:var(--action)}
.carte.doux{background:var(--surface-relief);-webkit-backdrop-filter:none;backdrop-filter:none}
.carte.vertdoux{background:var(--vert-doux);-webkit-backdrop-filter:none;backdrop-filter:none}
.carte.repere .pl-t2{font-size:var(--titre-3-taille);line-height:var(--titre-3-interligne);font-family:var(--famille-texte);font-weight:var(--titre-3-graisse)}
.grille{display:grid;gap:var(--space-4)}
.grille.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grille.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grille.serre{gap:var(--space-3)}
.deux-colonnes{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--space-6);align-items:start}
.deux-colonnes .prose{max-width:none}
.site-pile{display:flex;flex-direction:column;gap:var(--space-4)}

/* Les listes à puces : la pastille carrée de la charte en guise de puce. */
.points{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--space-2)}
.points li{position:relative;padding-left:18px}
.points li::before{content:"";position:absolute;left:0;top:calc(var(--corps-interligne) / 2 - 4px);width:8px;height:8px;border-radius:2px;background:linear-gradient(to top right,var(--action),var(--action-fin))}
.points.numerotee{counter-reset:etape}
.points.numerotee li{padding-left:28px}
.points.numerotee li::before{content:counter(etape);counter-increment:etape;width:auto;height:auto;top:0;background:none;font-family:var(--famille-donnee);font-size:var(--donnee-taille);line-height:var(--corps-interligne);color:var(--action)}

/* Qui agit : les trois badges du kit, aux couleurs d'état de la charte. */
.badges{display:flex;flex-wrap:wrap;gap:6px}
.badge-qui{display:inline-flex;align-items:center;font-size:var(--etiquette-taille);line-height:var(--etiquette-interligne);font-weight:var(--etiquette-graisse);letter-spacing:0.04em;text-transform:uppercase;padding:3px 8px;border-radius:var(--radius-s);white-space:nowrap}
.badge-qui.auto{background:var(--etat-conforme-doux);color:var(--etat-conforme)}
.badge-qui.signal{background:var(--etat-a-regarder-doux);color:var(--etat-a-regarder)}
.badge-qui.moi{background:transparent;color:var(--texte);border:1px solid var(--filet-controle)}
.carte .pl-t2 .badges{display:inline-flex}
.module .badges{margin-top:calc(-1 * var(--space-1))}

/* Les trois étapes du parcours. */
.etapes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}
.etape{padding:16px 18px;display:flex;flex-direction:column;gap:var(--space-2)}
.etape-n{font-size:var(--donnee-forte-taille);font-weight:var(--donnee-forte-graisse);color:var(--action);letter-spacing:0.08em}

/* Les situations du cabinet, sur la page BSF Sync : le moment, ce qui arrive, ce que fait BSF Sync, qui agit. */
.situation-moment{font-size:var(--donnee-taille);line-height:var(--donnee-interligne);color:var(--texte-second);letter-spacing:0.04em;text-transform:uppercase}
.situation .pl-t2{font-size:var(--titre-3-taille);line-height:var(--titre-3-interligne)}
.situation .badges{margin-top:auto}
.situation .badge-qui{white-space:normal}
.grille.g4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* La fenêtre de BSF Sync dans l'en-tête de sa page : la console de l'accueil, son bouton en image (rien à cliquer). */
.fenetre-poste{justify-self:end;max-width:26rem}
.fenetre-bouton{pointer-events:none;justify-content:center}
/* « Avec vos logiciels et vos appareils » : les pastilles de la zone d'intervention, alignées à gauche dans leur carte. */
.carte.installation .zone{justify-content:flex-start}

/* Le schéma des trois logiciels : les trois cartes en ligne, reliées par ce qui passe de l'une à l'autre ;
   empilé sous l'écran de bureau, les flèches tournées vers le bas. */
.schema{display:grid;grid-template-columns:minmax(0,1fr) minmax(8rem,12rem) minmax(0,1fr) minmax(8rem,12rem) minmax(0,1fr);gap:var(--space-3);align-items:center}
.schema.deux{grid-template-columns:minmax(0,1fr) minmax(8rem,14rem) minmax(0,1fr);max-width:64rem;width:100%;margin:0 auto}
.schema-noeud{height:100%}
.schema-nom{display:flex;align-items:center;gap:14px}
.schema-lien{display:flex;flex-direction:column;gap:var(--space-3)}
.schema-sens{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);text-align:center;font-size:var(--corps-dense-taille);line-height:var(--corps-dense-interligne);color:var(--texte-second)}
.schema-fleche{display:inline-flex;color:var(--action)}
.schema-retour .schema-fleche{transform:rotate(180deg)}


/* Une section large : la tête au-dessus, le corps sur toute la largeur (le schéma et la semaine de BSF Sync). */
.site-section.large .section-grille{display:flex;flex-direction:column}


/* L'encart d'urgence de l'accueil (« Votre cabinet est à l'arrêt ? ») : une carte en verre bordée du vert de l'action,
   le texte au milieu et le bouton d'appel à droite. */
.urgence{padding:var(--space-4) var(--space-6);display:flex;align-items:center;gap:var(--space-6);border-color:var(--action)}
.urgence-texte{flex:1 1 auto;display:flex;flex-direction:column;gap:var(--space-2);max-width:54rem}
.urgence .pl-btn{flex:none;margin-left:auto}
.delais-note{text-align:center}

/* Les chiffres clés des délais. */
.chiffres{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4);max-width:var(--largeur-vue)}
.chiffre-carte{flex-direction:row;align-items:center;gap:var(--space-4)}
.chiffre-carte .pl-chiffre{flex:none;min-width:4.5ch}

/* Les tableaux : celui de la charte, en texte courant. */
.tableau-site td{font-size:var(--corps-dense-taille);line-height:var(--corps-dense-interligne);padding:var(--space-3) var(--space-3);vertical-align:top;height:auto}
.tableau-site td:first-child{width:30%}
.tableau-site th{padding-left:var(--space-3)}

/* Les captures : un cadre en verre autour de l'image. */
.capture{margin:0;display:flex;flex-direction:column;gap:var(--space-2)}
.capture img{display:block;width:100%;height:auto;border-radius:var(--radius-l);border:1px solid var(--verre-filet);box-shadow:var(--ombre-verre)}
.capture.large{grid-column:1 / -1}
.deux-colonnes .capture:not(.large) img{max-width:380px}
.capture.poste{justify-self:center;max-width:360px}
.capture.poste img{max-width:100%}

/* Une carte « Bientôt » sur une seule ligne : l'icône, le titre, le badge, puis le texte. */
.carte.bientot:has(>.carte-ico){display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:var(--space-4);row-gap:var(--space-2)}
.carte.bientot>p{flex:1 1 22rem}
/* La carte de service : la phrase en tête, en graisse de titre, puis les points serrés. */
.carte-phrase{font-weight:600;color:var(--texte)}
.points.serres{gap:var(--space-1)}
.points.serres li{font-size:var(--corps-dense-taille);color:var(--texte-second)}
/* La foire aux questions : des cartes qui s'ouvrent, une colonne lisible au centre. */
.faq{display:flex;flex-direction:column;gap:var(--space-3);width:100%;max-width:52rem;margin:0 auto}
.faq details{padding:14px 18px;display:block}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);font-family:var(--famille-titre);font-weight:600;font-size:var(--titre-3-taille);line-height:var(--titre-3-interligne);color:var(--texte)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;color:var(--action);font-size:1.3em;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin-top:var(--space-2);color:var(--texte-second)}
/* Le cadre : un tableau à deux colonnes, le texte de référence à gauche, ce que BSF met en place à droite. */
.cadre{width:100%;max-width:62rem;margin:0 auto;padding:4px 24px;display:flex;flex-direction:column}
.cadre-ligne{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:var(--space-6);align-items:start;padding:18px 0;border-top:1px solid var(--filet-ligne)}
.cadre-ligne:first-child{border-top:0}
.cadre-ref{display:flex;align-items:center;gap:14px;font-family:var(--famille-titre);font-weight:600;color:var(--texte)}
.cadre-texte{display:flex;flex-direction:column;gap:var(--space-2)}
.cadre-texte>p{color:var(--texte)}
/* « En savoir plus » : le détail point par point, quelques mots par ligne, en deux colonnes sur grand écran. */
.cadre-detail summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--action)}
.cadre-detail summary::-webkit-details-marker{display:none}
.cadre-detail summary::after{content:"+";font-size:1.15em;line-height:1}
.cadre-detail[open] summary::after{content:"\2212"}
.cadre-detail ul{margin:var(--space-3) 0 0;padding:0;list-style:none;columns:2;column-gap:var(--space-6)}
.cadre-detail li{position:relative;padding:3px 0 3px 18px;break-inside:avoid;font-size:var(--corps-dense-taille);color:var(--texte-second)}
.cadre-detail li::before{content:"";position:absolute;left:0;top:calc(3px + var(--corps-dense-interligne) / 2 - 4px);width:8px;height:8px;border-radius:2px;background:linear-gradient(to top right,var(--action),var(--action-fin))}
@media (width < 40rem){.cadre{padding:4px 16px}.cadre-ligne{grid-template-columns:minmax(0,1fr);gap:var(--space-2)}.cadre-detail ul{columns:1}}
/* La zone d'intervention : les villes en pastilles, centrées. */
.zone{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-2)}
.zone li{padding:5px 13px;font-size:var(--corps-dense-taille);border-radius:var(--radius-l);border:1px solid var(--filet-controle);background:var(--surface-relief);font-weight:600;color:var(--texte)}
/* « Qui je suis » : la photo détourée à gauche, entière dans un disque vert doux (la tête n'en dépasse pas, décidé par
   Benoit) ; le texte et la carte de visite à droite. */
.qui-grille{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,26rem);gap:var(--space-8);align-items:center}
.qui-texte{display:flex;flex-direction:column;gap:var(--space-4)}
.qui-grille>.carte-visite{max-width:26rem;justify-self:end}
@media (width < 80rem){.qui-grille{grid-template-columns:auto minmax(0,1fr)}.qui-grille>.carte-visite{grid-column:1 / -1;justify-self:center}}
.qui-texte .prose{max-width:none}
.qui-photo{--t:240px;position:relative;margin:0;width:var(--t);height:var(--t);justify-self:center;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 35%,var(--vert-doux),var(--actif));border:1px solid var(--filet);box-shadow:var(--ombre-verre)}
.qui-photo img{display:block;width:100%;height:100%;object-fit:contain;transform:scale(.9);transform-origin:50% 100%}
/* La carte de visite (identite, dossier carte-visite) en version écran : verre au lieu du papier, le halo et la grille
   fondus depuis l'angle haut droit, le nom en Manrope 800, la ligne de surveillance, les coordonnées dans un cadre filet. */
.carte-visite{position:relative;overflow:hidden;width:100%;max-width:30rem;aspect-ratio:85/55;padding:28px 28px 22px;display:flex;flex-direction:column;gap:6px}
.carte-visite::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(70% 80% at 100% 0%,var(--halo-2),transparent 70%)}
.carte-visite::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(var(--grille) 1px,transparent 1px),linear-gradient(90deg,var(--grille) 1px,transparent 1px);background-size:24px 24px;-webkit-mask-image:radial-gradient(70% 80% at 100% 0%,#000,transparent 75%);mask-image:radial-gradient(70% 80% at 100% 0%,#000,transparent 75%)}
.carte-visite>*{position:relative;z-index:1}
.cv-symbole{position:absolute;top:24px;right:24px}
.cv-symbole svg{display:block;width:56px;height:56px}
.cv-nom{font-family:var(--famille-titre);font-weight:800;font-size:var(--titre-1-taille);line-height:1.15;color:var(--texte);padding-right:72px}
.cv-titre{color:var(--texte-second);line-height:1.7}
.cv-ligne{display:block;width:58%;height:20px;margin-top:6px;color:var(--action)}
.cv-coord{margin-top:auto;display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-3);padding:12px 18px;border:1px solid var(--filet);border-radius:var(--radius-l);line-height:1.7}
.cv-coord a{color:var(--texte);text-decoration:none}
.cv-coord a:hover{text-decoration:underline}
.cv-coord a.cv-site{color:var(--action);font-weight:700}

/* Les symboles d'état de BSF Sync. */
.etats{display:flex;flex-direction:column;gap:var(--space-3)}
.etat-ligne{display:flex;align-items:center;gap:var(--space-3)}
.etat-ligne img{flex:none}

/* Le thème décide de l'image affichée : clair ou sombre. */
html.site:not(.clair) .img-clair,html.site.clair .img-sombre{display:none}

/* L'appel à prendre rendez-vous, en pied de chaque page. */
.appel{padding:var(--space-6);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--space-6)}
.appel>div:first-child{display:flex;flex-direction:column;gap:var(--space-2);max-width:var(--largeur-texte)}
.appel-gestes{display:flex;flex-direction:column;gap:var(--space-2);align-items:flex-start}

/* Le formulaire de contact. */
.contact-grille{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--space-6);align-items:start}
.contact-cote{display:flex;flex-direction:column;gap:var(--space-4)}
.formulaire{gap:var(--space-4)}
.formulaire textarea.pl-champ{resize:vertical;min-height:9em;line-height:var(--corps-dense-interligne)}
.formulaire .pl-champ{font-size:var(--corps-taille)}
.piege{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.bandeau-info{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-radius:var(--radius-m);background:var(--etat-a-regarder-doux);border:1px solid var(--etat-a-regarder-filet);color:var(--texte)}
.bandeau-info[hidden]{display:none}
/* L'avertissement de sécurité : les couleurs de la panne de la charte, l'icône du bouclier, le premier mot en rouge. */
.alerte{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-4);border-radius:var(--radius-m);background:var(--etat-panne-doux);border:1px solid var(--etat-panne-filet);color:var(--texte)}
.alerte>.ico{flex:none;color:var(--etat-panne)}
.alerte p{margin:0;max-width:62rem}
.alerte b{color:var(--etat-panne)}
.champ{background:var(--etat-a-regarder-doux);color:var(--etat-a-regarder);border-radius:var(--radius-s);padding:0 4px}

/* Le pied de page. */
.site-pied{margin-top:var(--space-12);padding:var(--space-8) clamp(var(--space-4),4vw,4rem) var(--space-6);border-top:1px solid var(--filet-ligne)}
.site-pied-colonnes{max-width:calc(100rem - 2 * clamp(var(--space-4),4vw,4rem));margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--space-6)}
.site-pied-colonnes>div{display:flex;flex-direction:column;gap:var(--space-2)}
.site-marque{display:flex;align-items:center;gap:var(--space-3)}
.site-marque img{display:block;flex:none}
.site-marque-texte{display:flex;flex-direction:column;gap:var(--space-1)}
.site-marque-texte b{font-family:var(--famille-titre);font-weight:800;font-size:var(--titre-2-taille);line-height:1;letter-spacing:0.02em}
.site-marque-filet{display:block;height:1px;background:var(--filet)}
.site-marque-signature{font-family:var(--famille-donnee);font-size:11px;line-height:14px;letter-spacing:0.14em;text-transform:uppercase;color:var(--texte-second)}
.site-pied-liens{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--space-2)}
.site-pied-liens a{color:var(--texte-second);text-decoration:none}
.site-pied-liens a:hover{color:var(--texte)}
.site-pied-note{max-width:calc(100rem - 2 * clamp(var(--space-4),4vw,4rem));margin:var(--space-6) auto 0;font-size:var(--corps-dense-taille);line-height:var(--corps-dense-interligne)}

/* La tête d'une section, centrée au-dessus de son corps, sur toute taille d'écran : la page se lit au milieu, le contenu
   prend ensuite toute la largeur de la colonne. */
.site-section>.section-grille>.section-tete{align-items:center;text-align:center;max-width:46rem;margin:0 auto var(--space-2)}
.site-section>.section-grille>.section-tete .prose{align-items:center;max-width:42rem}
@media (width >= 90rem){.console{max-width:34rem}}
/* L'en-tête d'une page, et le lien qui clôt une section, centrés comme les têtes de section ; l'accueil garde son accroche. */
.site-entete:not(.site-entete-accueil) .site-colonne{align-items:center;text-align:center}
.site-entete:not(.site-entete-accueil) .chapeau{margin:0 auto}
.site-entete:not(.site-entete-accueil) .gestes{justify-content:center}
.site-section>.section-grille>.section-corps>.suite{text-align:center}

/* Écran moyen : deux colonnes au plus. */
@media (width < 64rem) /* ecran-bureau */{
  .qui-photo{--t:260px}
  .grille.g3,.grille.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fenetre-poste{justify-self:start}
  .schema,.schema.deux{grid-template-columns:minmax(0,1fr);max-width:36rem;width:100%;margin:0 auto}
  .schema-lien{flex-direction:row;justify-content:center;gap:var(--space-6)}
  .schema-fleche{transform:rotate(90deg)}
  .schema-retour .schema-fleche{transform:rotate(-90deg)}
  .site-pied-colonnes{grid-template-columns:1fr 1fr}
  .site-tete .pl-barre{gap:12px}
  /* Moins de place dans la barre : le bouton dit « Rendez-vous ». */
  .rdv-long{display:none}
  .rdv-court{display:inline}
  .tel-numero,.tel-urgence{display:none}
  .site-tete-tel{width:var(--densite-controle);justify-content:center;padding:0;border:1px solid var(--filet-controle)}
  .bento>.carte,.bento>.carte.bento-large{grid-column:span 3}
  .bento>.carte:last-child:nth-child(odd){grid-column:span 6}
  .accroche-grille{grid-template-columns:minmax(0,1fr);gap:var(--space-6);min-height:0}
  .console{justify-self:start;max-width:34rem}
  /* Sans la place de la scène : la console seule, à plat. */
  .scene{height:auto;perspective:none}
  .groupe{position:static;width:auto;height:auto;margin:0;transform:none;transition:none;scale:1}
  .plaque{display:none}
  .groupe .console{position:static;width:100%;transform:none;animation:none}
}
/* Tablette étroite : la barre garde les pages, le numéro et le thème ; « Contact » mène au formulaire. */
@media (width < 56rem){.site-tete-geste{display:none}}

/* Écran large mais pas très large : la scène réduite pour tenir dans sa colonne. */
@media (64rem <= width < 84rem){.groupe{--echelle:.7}.scene{height:24rem}}


/* Téléphone : une colonne, la barre du bas de la charte à la place des pages de la barre du haut. */
@media (width < 40rem) /* ecran-tablette */{
  .site-tete{position:static;padding:var(--space-2) var(--space-2) 0}
  .site-nav,.site-tete-geste,.site-tete-assist{display:none}
  .site-barre-bas{display:grid}
  html.site body{padding-bottom:calc(88px + env(safe-area-inset-bottom))}
  .site-colonne{padding:0 var(--space-4);gap:var(--space-4)}
  .site-section,.site-entete{padding-top:var(--space-8)}
  .affiche{font-size:var(--affiche-mobile-taille);line-height:var(--affiche-mobile-interligne)}
  /* Les séries de cartes de même nature coulissent de côté, du doigt, au lieu de s'empiler. */
  .grille.defile{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:85%;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding-bottom:var(--space-2)}
  .grille.defile>*{scroll-snap-align:start}
  .fenetre-poste .console-lignes{display:none}
  .grille.g2,.grille.g3,.grille.g4:not(.defile),.etapes,.chiffres,.deux-colonnes,.qui-grille,.contact-grille,.site-pied-colonnes{grid-template-columns:minmax(0,1fr)}
  .bento>.carte,.bento>.carte.bento-large{grid-column:span 6}
  /* La barre : le logo à gauche ; à droite, le numéro écrit en entier (un toucher appelle), puis le thème. */
  .site-tete-tel{margin-left:auto;width:auto;padding:0 var(--space-3);gap:var(--space-2)}
  .site-tete-tel .tel-numero{display:inline-block;max-width:none;margin-left:0;opacity:1;transition:none}
  .site-theme{margin-left:0}
  /* L'accroche : « Vous soignez. » puis « BSF s'occupe du reste. » sur sa ligne ; le sur-titre en deux lignes, sans point. */
  .site-entete-accueil .affiche{font-size:min(var(--affiche-mobile-taille),8.4vw)}
  .site-entete-accueil .affiche .vert{display:block;white-space:nowrap}
  .site-entete-accueil .chapeau{font-size:var(--corps-taille)}
  .site-entete-accueil{padding-top:var(--space-6)}
  .site-entete-accueil .accroche-texte{gap:var(--space-3)}
  .site-entete-accueil+.site-section.serre{padding-top:var(--space-4)}
  .site-onglets{top:var(--space-2);margin-top:var(--space-4);padding:0 var(--space-2)}
  .site-section[id]{scroll-margin-top:calc(var(--densite-controle) + 3 * var(--space-2))}
  .console{max-width:none}
  .rail-piste{grid-auto-columns:min(100%,19rem);column-gap:var(--space-3)}
  .rail-compte{display:none}
  .carte,.etape{border-radius:var(--radius-xl)}
  /* Sur téléphone, l'urgence vient juste sous l'accroche : la console, décor, s'efface. */
  .site-entete-accueil .scene{display:none}
  .carte-visite{padding:20px 18px 18px;gap:var(--space-3)}
  .carte-visite{aspect-ratio:auto}
  .cv-nom{padding-right:48px}
  .qui-photo{--t:240px}
  .cv-nom{font-size:var(--titre-2-taille)}
  .cv-titre{line-height:1.5}
  .cv-symbole{top:18px;right:16px}
  .cv-symbole svg{width:40px;height:40px}
  .appel,.urgence{padding:var(--space-4)}
  .urgence{flex-direction:column;align-items:stretch;gap:var(--space-4)}
  .urgence .pl-btn{margin-left:0}
  /* Sur téléphone, le bouton d'appel porte déjà l'icône : la tuile s'efface, le bouton monte dans le premier écran. */
  .urgence>.carte-ico{display:none}
  .urgence-texte p{text-wrap:pretty}
  .appel-gestes,.appel-gestes .pl-btn{align-items:stretch;width:100%}
  .tableau-site td:first-child{width:38%}
  .tableau-site th{white-space:normal}
  .site-pied{padding-left:var(--space-4);padding-right:var(--space-4)}
  .site-pied .site-pied-note{margin-top:var(--space-8)}
  /* Une seule marge à gauche sur téléphone : les en-têtes de page et de section s'alignent sur l'accroche et les cartes. */
  .site-entete:not(.site-entete-accueil) .site-colonne,
  .site-section>.section-grille>.section-tete{align-items:flex-start;text-align:left;margin-left:0;margin-right:0}
  .site-entete:not(.site-entete-accueil) .chapeau{margin:0}
  .site-entete:not(.site-entete-accueil) .gestes{justify-content:flex-start}
  .site-section>.section-grille>.section-corps>.suite,.delais-note{text-align:left}
  .zone{justify-content:flex-start}
  /* La carte « Bientôt » comme les autres : l'icône et le titre sur une ligne, la marque et le texte dessous. */
  .carte.bientot:has(>.carte-ico){display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:var(--space-4);row-gap:var(--space-2)}
  .carte.bientot:has(>.carte-ico)>:not(.carte-ico):not(h3){grid-column:1 / -1}
}