` natif : aucun JS, et la réponse est dans le document même
repliée, donc lisible par un moteur comme par un modèle. Le `FAQPage` est
construit à partir de ce markup par l'assembleur, jamais retapé à côté. */
.faq { max-width: 760px; }
.faq-q { border-top: 1px solid var(--color-border); }
.faq-q:last-of-type { border-bottom: 1px solid var(--color-border); }
.faq-q summary {
display: flex;
align-items: center;
gap: var(--space-4);
padding: var(--space-5) 0;
cursor: pointer;
list-style: none;
color: var(--color-ink);
font-size: var(--text-strong);
font-weight: var(--w-medium);
line-height: var(--lh-heading);
}
.faq-q summary::-webkit-details-marker { display: none; }
.faq-q summary::after {
content: "";
flex: none;
/* Propriété logique, pas physique : sous dir="rtl" la rangée flex s'inverse et
`margin-left` ramenait le chevron contre le texte au lieu de le pousser au
bord. Visible sur les quatre réponses en darija de
/facettes-dentaires-prix-maroc/. */
margin-inline-start: auto;
width: 9px; height: 9px;
border-right: 2px solid var(--color-cta);
border-bottom: 2px solid var(--color-cta);
transform: rotate(45deg) translate(-2px, -2px);
transition: transform var(--dur-fast) var(--ease-out);
}
.faq-q[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq-q summary:focus-visible { outline: 2px solid var(--color-cta); outline-offset: 3px; }
.faq-q p {
margin: 0 0 var(--space-5);
/* La réponse de FAQ est le plus long bloc du site : 95 caractères par ligne
en moyenne sur 24 pages, 127 au pire. 49ch en rend 75 à 14 px. */
max-width: 49ch;
color: var(--color-ink-soft);
font-size: var(--text-small);
line-height: var(--lh-small);
}
/* --------------------------------------------------------------------------
.cases — les cas traités, deux par ligne
-------------------------------------------------------------------------- */
/* Pas de comparateur ici : ces clichés portent déjà l'avant et l'après empilés
dans un seul fichier. Leur imposer un rapport les recadrerait, et sur un
cliché clinique le cadrage fait partie de la preuve. Hauteur naturelle. */
.cases { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); }
/* Trois cas de front : la bibliothèque esthétique en a assez, et deux par ligne
laisserait le troisième seul sur une demi-largeur. */
.cases--trio { grid-template-columns: repeat(3, 1fr); }
.case { margin: 0; }
.case img {
display: block;
width: 100%;
height: auto;
border-radius: var(--radius-lg);
background: var(--color-surface-2);
}
.case figcaption {
margin-top: var(--space-4);
color: var(--color-ink-soft);
font-size: var(--text-small);
line-height: var(--lh-small);
}
.case .link-more { margin-top: var(--space-3); font-size: var(--text-small); }
@media (max-width: 1024px) {
.cases--trio { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
.cases, .cases--trio { grid-template-columns: 1fr; gap: var(--space-10); }
}
/* --------------------------------------------------------------------------
.tbl — le tableau comparatif
-------------------------------------------------------------------------- */
/* Premier tableau du site, et les 14 pages de prix en demanderont un : écrit
comme composant, pas comme exception.
Aucune colonne n'est mise en avant, pas même celle de l'implant sur la page
de l'implant. Un tableau qui souligne sa propre réponse cesse d'être une
comparaison, et le lecteur le voit. Les faits suffisent.
`border-collapse: separate` + `overflow: hidden` : c'est ce qui permet à la
bordure arrondie de tenir sur un tableau. Avec `collapse`, les angles sautent. */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl {
width: 100%;
min-width: 540px;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
background: var(--color-surface);
font-size: var(--text-small);
line-height: var(--lh-small);
}
.tbl th,
.tbl td { padding: var(--space-4) var(--space-5); text-align: left; vertical-align: top; }
.tbl thead th {
background: var(--color-surface-2);
color: var(--color-ink);
font-weight: var(--w-medium);
}
.tbl tbody th {
color: var(--color-ink-soft);
font-weight: var(--w-regular);
}
.tbl tbody td { color: var(--color-ink); }
.tbl tbody tr + tr th,
.tbl tbody tr + tr td { border-top: 1px solid var(--color-border); }
@media (max-width: 768px) {
.tbl th, .tbl td { padding: var(--space-3) var(--space-4); }
}
/* .tbl--map — le tableau « situation → solution » de /protheses-dentaires/.
Sa première colonne est une phrase, pas une étiquette : à 375 px la colonne
de réponse sortait de l'écran et le lecteur devait faire défiler le tableau
pour lire ce qu'on lui propose. Sous 640 px chaque ligne devient donc une
fiche empilée, l'en-tête est masqué, et chaque valeur porte son intitulé
via data-label. Le tableau reste un tableau pour le moteur et le lecteur
d'écran ; seule sa mise en page change. */
@media (max-width: 640px) {
.tbl--map { min-width: 0; border: 0; background: none; overflow: visible; }
.tbl--map thead {
position: absolute; width: 1px; height: 1px;
margin: -1px; padding: 0; overflow: hidden;
clip-path: inset(50%); white-space: nowrap;
}
.tbl--map tbody tr {
display: block;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-surface);
padding: var(--space-4);
}
.tbl--map tbody tr + tr { margin-top: var(--space-3); }
.tbl--map tbody th,
.tbl--map tbody td { display: block; padding: 0; border-top: 0; }
.tbl--map tbody th {
color: var(--color-ink);
font-weight: var(--w-medium);
margin-bottom: var(--space-3);
}
.tbl--map tbody td + td { margin-top: var(--space-2); }
.tbl--map tbody td::before {
content: attr(data-label) " : ";
color: var(--color-ink-soft);
}
/* La bordure supérieure de séparation ne vaut plus rien une fois les
lignes séparées en fiches. */
.tbl--map tbody tr + tr th,
.tbl--map tbody tr + tr td { border-top: 0; }
}
/* --------------------------------------------------------------------------
.duo — deux colonnes sur un seul fond
-------------------------------------------------------------------------- */
/* .cabinet coupe la bande en deux surfaces, blanc à gauche et gris à droite :
le pli se voit et la section se lit comme deux blocs collés. Ici une seule
assise sur toute la largeur, posée par .section--alt.
La carte n'a donc pas de fond : sur une bande blanche un aplat blanc ne
dit rien, et un aplat teinté rouvrirait la coupure qu'on vient de fermer.
Reste le liseré, qui groupe les trois points sans ajouter de surface.
Pas d'ombre : D-016, les cartes reposent, elles ne lévitent pas. */
.duo {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-16);
align-items: start;
}
/* Quand une colonne est bien plus haute que l'autre — un carrousel carré face à
trois paragraphes — le calage en haut laisse le texte flotter seul. */
.duo--center { align-items: center; }
.duo-copy .eyebrow {
display: block;
margin-bottom: var(--space-3);
color: var(--color-cta);
font-size: var(--text-micro);
font-weight: var(--w-medium);
letter-spacing: var(--track-label);
text-transform: uppercase;
}
.duo-copy h2 { margin-bottom: var(--space-5); font-size: var(--text-title); text-wrap: balance; }
/* Un h3 dans une colonne de prose : base.css met toutes les têtes à margin 0, ce
qui le collait à son paragraphe et le faisait lire comme du gras en ligne.
Sert les quatre matériaux de /facettes-dentaires-prix-maroc/ et les pages de
prix qui suivent. */
.duo-copy h3 { margin-bottom: var(--space-3); }
.duo-copy > * + h3 { margin-top: var(--space-8); }
.duo-panel {
padding: var(--space-10);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
}
/* La colonne droite en image plutôt qu'en carte. Le 4/5 est celui des clichés
cliniques du cabinet : les recadrer en paysage couperait la gencive, qui est
la moitié de ce que le cliché démontre. */
.duo-media {
margin: 0;
border-radius: var(--radius-lg);
overflow: hidden;
aspect-ratio: 4 / 5;
background: var(--color-surface-2);
}
.duo-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Un schéma se montre entier. Lui imposer un rapport fixe le recadre, et un
schéma recadré perd la moitié de ses légendes. */
.duo-media--natural { aspect-ratio: auto; background: none; border-radius: var(--radius-lg); }
.duo-media--natural img { height: auto; object-fit: contain; }
/* La légende d'une image de section. Deux fois plus de gens la lisent que le
corps du texte, donc elle sort du cadre : le rognage arrondi passe sur l'image
elle-même et la légende se lit comme une ligne autonome en dessous.
Standard voix-kandil §4.3. */
.duo-media figcaption {
margin-top: var(--space-4);
color: var(--color-ink-soft);
font-size: var(--text-small);
line-height: var(--lh-small);
}
.duo-media:has(figcaption) { overflow: visible; border-radius: 0; background: none; }
.duo-media:has(figcaption) img { border-radius: var(--radius-lg); }
/* Empilées, pas en grille : dans une demi-colonne trois cartes côte à côte
réduisent le chiffre à la taille de son libellé. */
.duo-copy .stats { grid-template-columns: 1fr; margin-top: var(--space-8); }
/* .points — la liste de la carte, plus légère que .ticks
-------------------------------------------------------------------------- */
/* Trois coches identiques ne se scannent pas : l'œil voit trois fois le même
signe et lit quand même les trois lignes. Un filet entre les points sépare
mieux qu'un pictogramme répété, et il ne consomme pas le bleu. D-016 en
demande quatre ou cinq emplois par page, pas dix.
Pas de numéros non plus : ces trois-là ne se suivent pas, l'image les donne
d'un coup. Numéroter aurait annoncé une séquence qui n'existe pas. */
.points { margin: 0; padding: 0; list-style: none; }
.points li {
position: relative;
padding: var(--space-5) 0 var(--space-5) var(--space-5);
border-top: 1px solid var(--color-border);
}
.points li:first-child { padding-top: 0; border-top: 0; }
.points li:last-child { padding-bottom: 0; }
.points li::before {
content: "";
position: absolute;
left: 0;
top: calc(var(--space-5) + 10px);
width: 6px; height: 6px;
border-radius: 50%;
background: var(--color-cta);
}
.points li:first-child::before { top: 10px; }
.points b {
display: block;
margin-bottom: 3px;
color: var(--color-ink);
font-size: var(--text-strong);
font-weight: var(--w-medium);
}
.points span {
display: block;
/* La mesure globale vit sur : un en display:block y échappe et
courait sur toute la largeur du conteneur. Mesuré à 1 128 px le 2026-09-14
sur la page détartrage, soit près de 170 caractères par ligne. */
max-width: var(--measure-body);
color: var(--color-ink-soft);
font-size: var(--text-small);
line-height: var(--lh-small);
}
@media (max-width: 900px) {
.cabinet--reverse .cabinet-info { order: 2; padding: var(--space-12) var(--gutter); }
.cabinet--reverse .cabinet-inner { margin-left: 0; padding-left: 0; }
.cabinet-media { order: 1; aspect-ratio: 16 / 10; }
.cabinet-media img { position: absolute; }
.duo { grid-template-columns: 1fr; gap: var(--space-10); }
.duo-panel { padding: var(--space-8); }
.duo-media { aspect-ratio: 4 / 3; }
}
/* --------------------------------------------------------------------------
En consultation — la séquence, en trois temps
-------------------------------------------------------------------------- */
/* Numérotée parce que c'est une suite dans le temps, pas une liste d'atouts.
Un patient qui n'est jamais venu y lit ce qui va lui arriver, dans l'ordre.
Même coque que .kit sur l'accueil : la tuile bleue y porte un chiffre au
lieu d'une icône. Rien de nouveau n'entre dans le système. */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.step {
display: flex;
gap: var(--space-4);
padding: var(--space-6);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
}
.step-num {
flex: none;
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-md);
background: var(--color-surface-3);
color: var(--color-cta);
font-size: var(--text-strong);
font-weight: var(--w-display);
letter-spacing: 0;
}
.step h3 {
margin: 0 0 var(--space-2);
font-size: var(--text-strong);
font-weight: var(--w-medium);
letter-spacing: var(--track-heading);
line-height: var(--lh-heading);
color: var(--color-ink);
}
.step p {
margin: 0;
font-size: var(--text-small);
line-height: var(--lh-small);
color: var(--color-ink-soft);
}
/* La troisième carte est celle qui répond à la vraie question : combien, et
quand est-ce que je m'engage. Elle porte donc l'aplat, pas les deux autres. */
.step--devis { background: var(--color-surface-3); border-color: var(--color-blue-100); }
.step--devis .step-num { background: var(--color-surface); }
@media (max-width: 1024px) { .steps { grid-template-columns: 1fr; } }
/* --------------------------------------------------------------------------
La bande pratique — ce qu'il faut savoir avant de venir
-------------------------------------------------------------------------- */
/* Trois faits, pas une phrase. Le tarif, l'adresse avec son repère, et le
temps depuis Casablanca : les trois questions posées avant de décrocher.
« Derb Riad 2 » ne se trouve pas tout seul — le repère visuel fait plus pour
la venue que n'importe quelle formule d'accueil. */
.practical {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-4);
}
.practical-item {
display: flex;
gap: var(--space-4);
padding: var(--space-6);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
}
.practical-item .kit-icon { flex: none; }
.practical-item h3 {
margin: 0 0 var(--space-2);
font-size: var(--text-micro);
font-weight: var(--w-medium);
letter-spacing: var(--track-label);
text-transform: uppercase;
color: var(--color-ink-soft);
}
.practical-item p {
margin: 0;
font-size: var(--text-small);
line-height: var(--lh-small);
color: var(--color-ink);
}
.practical-item p b {
display: block;
font-size: var(--text-strong);
font-weight: var(--w-display);
letter-spacing: var(--track-heading);
line-height: 1.2;
}
.practical-item a { color: var(--color-link); text-decoration: none; }
.practical-item a:hover { text-decoration: underline; }
@media (max-width: 900px) { .practical { grid-template-columns: 1fr; } }
/* Le chapô de la page contact porte des liens : ils doivent se voir sans
trouer le paragraphe. */
.page-head .lede a { color: var(--color-link); text-decoration: underline; text-underline-offset: 3px; }
.page-head .lede a:hover { color: var(--color-cta-hover); }
/* --------------------------------------------------------------------------
La pastille d'état, posée en haut de la photo
-------------------------------------------------------------------------- */
/* C'est .hero-badge de l'accueil, sans une ligne de dessin en plus : verre
dépoli, texte blanc, point coloré. Elle est faite pour vivre sur une image,
c'est exactement ce qu'on lui demande ici.
horaires.js ne connaît que [data-horaires] : le comportement est le même,
l'état est réel, en heure de Casablanca.
Le décalage haut rend ses pixels à l'en-tête fixe, sinon la pastille passe
dessous. */
.page-head-media .hero-badge {
position: absolute;
top: calc(66px + var(--space-5));
left: var(--space-5);
z-index: 2;
margin: 0;
}
/* La pastille est blanche sur une photo qui n'a pas été choisie pour elle.
Mesuré sur le pixel rendu, pas sur les tokens : 1,44:1 sur /services/,
4,21:1 sur /implant-dentaire/, les deux sous AA. Un voile cantonné à la
hauteur de la pastille remonte les deux sans ternir l'image en dessous. */
/* Le voile ne suffit pas partout : sur un mur blanc en arrière-plan la pastille
reste sous AA (3,94:1 à 375 px). Sur le hero coupé en deux, où aucun dégradé
ne protège la photo, le verre se pose sur une base sombre au lieu d'une base
claire. L'accueil garde sa pastille claire, son hero a son propre dégradé. */
.page-head--split .page-head-media .hero-badge {
border-color: rgba(255, 255, 255, .34);
background: rgba(23, 28, 46, .58);
}
.page-head--split .page-head-media::before {
content: "";
position: absolute;
inset: 0 0 auto;
height: 200px;
background: linear-gradient(to bottom,
rgba(23, 28, 46, .62), rgba(23, 28, 46, .28) 55%, rgba(23, 28, 46, 0));
pointer-events: none;
z-index: 1;
}
@media (max-width: 768px) {
.page-head-media .hero-badge { top: var(--space-4); left: var(--space-4); }
}
/* --------------------------------------------------------------------------
Prendre contact — formulaire à gauche, joindre le cabinet à droite
-------------------------------------------------------------------------- */
.reach { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-8); align-items: stretch; }
.reach-card {
padding: var(--space-8);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
}
/* Le seul h2 du site qui reste en sans (D-040). Il est balisé h2 pour le plan du
document, mais il est dimensionné en --text-heading, c'est-à-dire en
sous-titre : à 19 px la serif perd ses empattements et ne gagne rien, et la
même règle vaut ici que pour h3 et h4. Il garde donc sa graisse. */
.reach-card > h2 {
margin: 0 0 var(--space-2);
font-family: var(--font-sans);
font-size: var(--text-heading);
font-weight: var(--w-bold);
letter-spacing: var(--track-heading);
}
.reach-card > h2 + p {
margin: 0 0 var(--space-6);
max-width: none;
font-size: var(--text-small);
line-height: var(--lh-small);
color: var(--color-ink-soft);
}
/* ---- Le formulaire ----
Quatre champs. TEMPLATE est explicite : nom, téléphone, motif, créneau, et
rien d'autre. Chaque champ ajouté est un rendez-vous perdu. */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.field-full { grid-column: 1 / -1; }
.form-grid label {
display: block;
margin-bottom: 6px;
font-size: var(--text-micro);
font-weight: var(--w-medium);
letter-spacing: var(--track-label);
text-transform: uppercase;
color: var(--color-ink-soft);
}
.form-grid input,
.form-grid select {
width: 100%;
padding: 13px var(--space-4);
background: var(--color-surface);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-md);
font-family: inherit;
font-size: var(--text-body);
color: var(--color-ink);
appearance: none;
}
.form-grid select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23565D77' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--space-4) center;
padding-right: var(--space-10);
}
.form-grid input:focus-visible,
.form-grid select:focus-visible {
outline: none;
border-color: var(--color-cta);
box-shadow: var(--shadow-focus);
}
.form-grid .btn { width: 100%; justify-content: center; margin-top: var(--space-2); }
.form-note {
margin: var(--space-4) 0 0;
max-width: none;
font-size: var(--text-micro);
line-height: var(--lh-small);
color: var(--color-ink-soft);
}
/* La photo tient toute la hauteur de la colonne : à côté d'un formulaire, une
image plus courte laisse un vide qui se lit comme un défaut d'alignement. */
.reach-media {
position: relative;
overflow: hidden;
min-height: 420px;
border-radius: var(--radius-lg);
background: var(--color-surface-2);
box-shadow: var(--shadow-card);
}
.reach-media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Les horaires ferment la carte du formulaire : c'est la question qui suit
« quand est-ce que je peux venir », posée dans le même souffle. */
.reach-card .reach-hours {
margin-top: var(--space-6);
padding-top: var(--space-5);
border-top: 1px solid var(--color-border);
}
.reach-card .reach-hours .lbl {
display: block;
margin-bottom: var(--space-3);
font-size: var(--text-micro);
font-weight: var(--w-medium);
letter-spacing: var(--track-label);
text-transform: uppercase;
color: var(--color-ink-soft);
}
.reach-hours { display: grid; gap: 7px; margin-top: var(--space-2); }
.reach-hours div { display: flex; justify-content: space-between; gap: var(--space-4); font-size: var(--text-small); color: var(--color-ink-soft); }
.reach-hours b { font-weight: var(--w-medium); color: var(--color-ink); white-space: nowrap; }
@media (max-width: 900px) {
.reach { grid-template-columns: 1fr; gap: var(--space-6); }
.reach-media { min-height: 0; aspect-ratio: 3 / 2; }
}
@media (max-width: 560px) {
.form-grid { grid-template-columns: 1fr; }
.reach-card { padding: var(--space-6); }
}
/* --------------------------------------------------------------------------
La citation — à même la photo
-------------------------------------------------------------------------- */
/* Pas de carte. Le texte est posé sur l'image, et c'est un dégradé qui tient
la lisibilité — pas une boîte. Une carte affiche une citation ; sans carte,
la citation appartient à la photo.
Le dégradé monte à 0,74 en bas : mesuré sous un pixel blanc, le pire cas
possible, le texte tient 7,4:1 et la signature 6,1:1. Il part de zéro assez
haut pour qu'aucune arête ne se voie, et le visage reste dégagé. */
.quote-card {
position: absolute;
left: 0;
right: 0;
bottom: 0;
margin: 0;
padding: var(--space-24) var(--space-8) var(--space-8);
color: #fff;
background: linear-gradient(to top,
rgba(20, 25, 42, 0.74) 0%,
rgba(20, 25, 42, 0.62) 34%,
rgba(20, 25, 42, 0.28) 62%,
rgba(20, 25, 42, 0) 100%);
}
.quote-card p {
margin: 0;
max-width: 34ch;
font-size: var(--text-heading);
font-style: italic;
font-weight: var(--w-regular);
line-height: 1.45;
letter-spacing: var(--track-heading);
color: #fff;
text-wrap: pretty;
/* L'ombre ne remplace pas le dégradé, elle rattrape les zones les plus
claires de l'image sans avoir à noircir tout le bas. */
text-shadow: 0 1px 14px rgba(12, 16, 30, 0.45);
}
.quote-card footer {
display: flex;
align-items: center;
gap: var(--space-3);
margin-top: var(--space-5);
font-size: var(--text-micro);
font-weight: var(--w-medium);
letter-spacing: var(--track-label);
text-transform: uppercase;
color: rgba(255, 255, 255, 0.86);
}
/* Un filet clair plutôt qu'un tiret : il signe sans ouvrir une ponctuation. */
.quote-card footer::before {
content: '';
flex: none;
width: 26px;
height: 1px;
background: var(--color-on-dark);
}
@media (max-width: 768px) {
.quote-card { padding: var(--space-20) var(--gutter) var(--space-6); }
.quote-card p { font-size: var(--text-body); max-width: none; }
}
/* --------------------------------------------------------------------------
Les praticiens — trois cartes qui s'ouvrent
La carte fermée est une photo pleine, deux puces en haut, le nom sur le
voile sombre en bas. Celle du fondateur tient deux colonnes et deux rangs.
À l'ouverture, .doc-inner passe en position fixe sur son propre rectangle,
puis anime top/left/width/height jusqu'au panneau centré. Aucune mise à
l'échelle : le texte ne se déforme donc jamais pendant le mouvement.
-------------------------------------------------------------------------- */
/* La hauteur vient de la fenêtre, pas du ratio des photos. Deux rangs de 4/5
donnaient près de 940 px : les trois cartes ne tenaient plus dans un écran.
Le plancher évite l'écrasement sur un portable posé à l'horizontale, le
plafond évite la carte géante sur un 27 pouces. */
.docs {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr 1fr;
gap: var(--space-5);
height: clamp(440px, 70vh, 640px);
}
.doc { position: relative; }
/* Deux colonnes et toute la hauteur : la carte du fondateur pèse quatre fois
les autres sans qu'aucune valeur en pixels soit écrite. */
.doc--lead { grid-column: span 2; grid-row: 1 / -1; }
.doc-inner {
position: absolute;
inset: 0;
overflow: hidden;
border-radius: var(--radius-lg);
background: var(--color-dark);
box-shadow: var(--shadow-card);
transition: box-shadow var(--dur-base) var(--ease-out);
}
.doc:hover .doc-inner { box-shadow: var(--shadow-lift); }
.doc-shot {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
/* Le sujet remonte : sur les cartes courtes de la colonne de droite, un
cadrage centré posait le menton exactement là où s'écrit le nom. */
object-position: 50% 14%;
}
/* 🟠 Provisoire, et s'en va avec la photo qu'elle cadre. Le plan aux loupes
n'est pas un portrait de studio : le sujet est au milieu de l'image, pas
en haut, et le cadrage commun le décapiterait. */
.doc-shot--work {
object-position: 50% 26%;
transition: transform var(--dur-slow) var(--ease-out);
}
.doc:hover .doc-shot { transform: scale(1.03); }
/* Le même voile que le hero, en plus court : la carte est plus petite, le
dégradé doit donc monter plus vite pour porter le nom. */
.doc-inner::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(0deg,
rgba(20, 24, 36, .90) 0%,
rgba(20, 24, 36, .72) 26%,
rgba(20, 24, 36, .28) 52%,
transparent 74%);
}
.doc-chips {
position: absolute;
top: var(--space-4);
left: var(--space-4);
right: var(--space-4);
display: flex;
flex-wrap: wrap;
gap: 6px;
z-index: 2;
}
/* Fond sombre et non clair : ces cartes portent des photos de studio sur fond
gris pâle, où une puce en verre blanc disparaît. L'encre blanche sur voile
sombre tient sur n'importe quelle image, claire ou foncée. */
.doc-chips .chip-glass {
padding: 5px 12px;
border: 1px solid rgba(255, 255, 255, .16);
background: rgba(20, 24, 36, .62);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow: none;
color: #fff;
}
.doc-head {
position: absolute;
left: var(--space-5);
right: calc(var(--space-5) + 56px);
bottom: var(--space-5);
z-index: 2;
}
.doc-role {
margin: 0 0 4px;
color: rgba(255, 255, 255, .78);
font-size: var(--text-micro);
font-weight: var(--w-medium);
letter-spacing: var(--track-label);
text-transform: uppercase;
}
.doc-name {
margin: 0 0 var(--space-2);
color: #fff;
font-size: var(--text-heading);
font-weight: var(--w-display);
line-height: var(--lh-heading);
letter-spacing: var(--track-heading);
text-shadow: 0 1px 2px rgba(20, 24, 36, .3);
}
.doc--lead .doc-name { font-size: var(--text-title); }
.doc-line {
margin: 0;
max-width: 34ch;
color: rgba(255, 255, 255, .86);
font-size: var(--text-small);
line-height: var(--lh-small);
text-shadow: 0 1px 14px rgba(20, 24, 36, .4);
}
/* Le bouton EST la cible de clic, et il fait 48 px : la dette 3.4.1 ne se
crée pas ici. La carte entière reste cliquable via le JS, mais le clavier
et les lecteurs d'écran n'ont qu'un seul élément à atteindre. */
.doc-toggle {
position: absolute;
right: var(--space-5);
bottom: var(--space-5);
z-index: 3;
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
padding: 0;
border: 1px solid rgba(255, 255, 255, .22);
border-radius: var(--radius-full);
background: rgba(20, 24, 36, .55);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: #fff;
cursor: pointer;
transition: background-color var(--dur-base) var(--ease-out),
transform var(--dur-base) var(--ease-out);
}
.doc-toggle:hover { background: rgba(20, 24, 36, .78); }
.doc-toggle svg { transition: transform var(--dur-base) var(--ease-out); }
.doc.is-open .doc-toggle { opacity: 0; pointer-events: none; }
/* ---- Le panneau, et l'état ouvert ---- */
/* Ouvert, la carte devient deux colonnes : la photo garde la gauche, le texte
occupe la droite. Le panneau n'est donc pas un calque posé sur la carte,
c'est la moitié droite de la carte agrandie. */
.doc-panel {
position: absolute;
inset: 0;
z-index: 4;
overflow-y: auto;
overscroll-behavior: contain;
padding: var(--space-10) var(--space-10) var(--space-8);
background: var(--color-surface);
opacity: 0;
visibility: hidden;
transition: opacity var(--dur-base) var(--ease-out),
visibility 0s linear var(--dur-base);
}
.doc.is-open .doc-panel {
opacity: 1;
visibility: visible;
/* Le texte n'arrive qu'une fois la carte arrivée à destination : une lecture
qui commence pendant que le cadre bouge encore est illisible. */
transition: opacity var(--dur-base) var(--ease-out) 220ms, visibility 0s;
}
/* La croix de fermeture occupe le coin : le rôle et le nom lui laissent la
place, sinon un nom long passe dessous. */
.doc-panel-role,
.doc-panel-name { padding-right: 56px; }
.doc-panel-role {
margin: 0 0 4px;
color: var(--color-cta);
font-size: var(--text-micro);
font-weight: var(--w-medium);
letter-spacing: var(--track-label);
text-transform: uppercase;
}
.doc-panel-name {
margin: 0 0 var(--space-6);
color: var(--color-ink);
font-size: var(--text-title);
font-weight: var(--w-display);
line-height: var(--lh-heading);
letter-spacing: var(--track-display);
}
.doc-panel p:not([class]) {
margin: 0 0 var(--space-4);
max-width: var(--measure-body);
color: var(--color-ink-soft);
font-size: var(--text-body);
line-height: var(--lh-body);
}
.doc-panel p:not([class]):last-child { margin-bottom: 0; }
/* Les repères, dans le panneau. C'est .cv-list de la page du fondateur, resserré :
la colonne du panneau fait 58 % de 1 060 px, une étiquette de 13 rem y laissait
deux mots par ligne au texte. */
.doc-panel .cv-list--tight { margin-top: var(--space-6); }
.cv-list--tight li {
grid-template-columns: 9.5rem 1fr;
gap: var(--space-4);
padding: var(--space-4) 0;
}
.cv-list--tight .cv-what { font-size: var(--text-small); }
@media (max-width: 600px) {
.cv-list--tight li { grid-template-columns: 1fr; gap: 2px; padding: var(--space-3) 0; }
}
.doc-close {
position: absolute;
top: var(--space-5);
right: var(--space-5);
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-full);
background: var(--color-surface);
color: var(--color-ink);
cursor: pointer;
transition: background-color var(--dur-base) var(--ease-out);
}
.doc-close:hover { background: var(--color-surface-2); }
/* Pendant l'ouverture, .doc-inner est en position: fixe et le JS écrit
top/left/width/height. La transition porte sur ces quatre valeurs, pas sur
une échelle : c'est ce qui garde le texte net du début à la fin. */
.doc-inner.is-flying {
position: fixed;
z-index: var(--z-modal);
transition: top var(--dur-slow) var(--ease-inout),
left var(--dur-slow) var(--ease-inout),
width var(--dur-slow) var(--ease-inout),
height var(--dur-slow) var(--ease-inout),
border-radius var(--dur-slow) var(--ease-inout),
box-shadow var(--dur-slow) var(--ease-out);
}
.doc.is-open .doc-inner { box-shadow: var(--shadow-deep); }
/* La photo se resserre sur la colonne de gauche pendant que le cadre vole. Le
voile et le nom s'effacent : le nom est repris en tête du panneau, le garder
des deux côtés ferait doublon. */
.doc.is-open .doc-shot { width: 42%; }
.doc.is-open .doc-inner::after,
.doc.is-open .doc-chips,
.doc.is-open .doc-head { opacity: 0; transition: opacity var(--dur-base) var(--ease-out); }
.doc-shot { transition: transform var(--dur-slow) var(--ease-out),
width var(--dur-slow) var(--ease-inout); }
.doc.is-open .doc-panel { left: 42%; }
/* Le voile reste dans le document entre deux ouvertures, pour ne pas être
recréé à chaque fois. Il doit donc être RÉELLEMENT inerte quand il est
éteint : à opacité 0 seule, il couvrait toujours la fenêtre entière et
avalait tous les clics et toute sélection de texte de la page. */
.doc-scrim {
position: fixed;
inset: 0;
z-index: calc(var(--z-modal) - 1);
background: rgba(20, 24, 36, .55);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity var(--dur-slow) var(--ease-out),
visibility 0s linear var(--dur-slow);
}
.doc-scrim.is-on {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition: opacity var(--dur-slow) var(--ease-out), visibility 0s;
}
/* ---- Paliers ---- */
@media (max-width: 1024px) {
.doc-panel { padding: var(--space-8) var(--space-8) var(--space-6); }
}
@media (max-width: 768px) {
/* Deux colonnes : le fondateur prend la largeur entière, les deux autres se
partagent le rang du dessous. La hiérarchie tient sans carte géante. */
/* Le fondateur prend le rang du haut sur toute la largeur, les deux autres
se partagent celui du bas. La hauteur reste pilotée par la fenêtre : sur
une tablette en portrait, trois cartes au ratio des photos débordaient
de l'écran exactement comme sur le bureau. */
.docs {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1.15fr 1fr;
gap: var(--space-4);
height: clamp(460px, 72vh, 680px);
}
.doc--lead { grid-column: 1 / -1; grid-row: 1; }
.doc.is-open .doc-shot { opacity: 0; }
.doc.is-open .doc-panel { left: 0; }
.doc-head { left: var(--space-4); right: calc(var(--space-4) + 52px); bottom: var(--space-4); }
.doc-toggle { right: var(--space-4); bottom: var(--space-4); }
.doc-chips { top: var(--space-3); left: var(--space-3); right: var(--space-3); }
}
@media (max-width: 480px) {
/* Une colonne : à cette largeur, deux cartes côte à côte rendent le nom
illisible et la cible de clic trop petite. */
/* Une colonne, et là seulement on revient au ratio : trois cartes empilées
dans une hauteur imposée deviendraient des bandeaux. 3/2 les met bout à
bout dans un écran de téléphone sans les écraser. */
.docs {
grid-template-columns: 1fr;
grid-template-rows: auto;
height: auto;
}
.doc { aspect-ratio: 3 / 2; }
.doc--lead { grid-row: auto; aspect-ratio: 3 / 2; }
.doc--lead .doc-name { font-size: var(--text-heading); }
.doc-line { display: none; }
.doc-panel { padding: var(--space-6) var(--space-5) var(--space-5); }
.doc-panel-name { font-size: var(--text-heading); }
.doc-close { top: var(--space-4); right: var(--space-4); }
}
@media (prefers-reduced-motion: reduce) {
.doc-inner.is-flying { transition: none; }
.doc-shot, .doc:hover .doc-shot { transition: none; transform: none; }
.doc.is-open .doc-panel { transition: none; }
}
/* ======================================================================
Les huit disciplines — /services/
====================================================================== */
/* Grille à 6 colonnes, cartes de proportions inégales : le rythme vient des
spans, jamais d'une valeur en pixels. Une carte ouverte prend toute la
largeur et les autres se replacent autour — le mouvement est animé en FLIP
dans assets/js/disciplines.js, un changement de span ne se transitionnant
pas en CSS.
La photo reprend le langage du carrousel d'accueil (.rail-shot) : format
portrait, zoom léger au survol, étiquette en bas à gauche. */
.disc-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-4);
}
.disc {
position: relative;
scroll-margin-top: 90px; /* la barre collée fait 66 px, plus une marge */
display: flex;
flex-direction: column;
overflow: hidden;
background: var(--color-surface-2);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
transition: border-color var(--dur-base) var(--ease-out),
background var(--dur-base) var(--ease-out);
}
.disc:hover { border-color: var(--color-accent); background: var(--color-surface); }
.disc.is-open {
grid-column: 1 / -1;
background: var(--color-surface);
border-color: var(--color-accent);
box-shadow: var(--shadow-card);
}
.disc-shot {
position: relative;
display: block;
height: 208px;
flex: none;
overflow: hidden;
background: var(--color-surface-2);
}
.disc-shot img {
width: 100%; height: 100%;
object-fit: cover;
object-position: 50% 30%;
transition: transform var(--dur-slow) var(--ease-out);
}
.disc:hover .disc-shot img { transform: scale(1.035); }
/* Ouverte, la photo disparaît : gardée en bandeau elle écrasait la lecture du
panneau, qui est la seule raison d'ouvrir la carte. */
.disc.is-open .disc-shot { display: none; }
.disc-tag {
position: absolute;
left: var(--space-3);
bottom: var(--space-3);
padding: 5px 10px;
border-radius: 999px;
background: rgba(20, 24, 36, .62);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
color: #fff;
font-size: var(--text-xs);
font-weight: 600;
}
.disc-body {
display: flex;
flex-direction: column;
flex: 1;
padding: var(--space-5);
}
.disc h3 { margin: 0 0 var(--space-2); font-size: var(--text-lg); }
.disc-line { margin: 0; color: var(--color-ink-soft); }
/* Le bouton couvre la carte : la cible est la carte entière, pas un lien. */
.disc-toggle {
position: absolute;
inset: 0;
z-index: 1;
width: 100%;
border: 0;
padding: 0;
background: transparent;
cursor: pointer;
}
.disc-toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.disc-panel {
display: none;
margin-top: var(--space-4);
padding-top: var(--space-4);
border-top: 1px solid var(--color-border);
}
.disc.is-open .disc-panel { display: block; animation: disc-in .3s var(--ease-out) both; }
@keyframes disc-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.disc-panel p { margin: 0 0 var(--space-3); max-width: var(--measure-body); color: var(--color-ink-soft); }
.disc-panel .btn { position: relative; z-index: 2; }
.disc-close {
position: absolute;
top: var(--space-3);
right: var(--space-3);
z-index: 2;
display: none;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border: 0;
border-radius: 50%;
background: rgba(20, 24, 36, .62);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
color: #fff;
cursor: pointer;
}
.disc.is-open .disc-close { display: inline-flex; }
@media (max-width: 900px) {
.disc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.disc-grid { grid-template-columns: 1fr; }
.disc-shot { height: 190px; }
}
/* --------------------------------------------------------------------------
La facture d'une couronne : le calculateur de /couronne-dentaire-au-maroc/.
Les montants arrivent de content/prices.json au build ({{tarifs:…}} dans
build-pages.js) : ni ce fichier ni facture.js ne portent un chiffre. Sans JS,
le bloc reste masqué et le tableau des trois cas fait le travail.
-------------------------------------------------------------------------- */
.facture {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: var(--space-8);
margin-top: var(--space-12);
padding: var(--space-8);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
}
.facture[hidden] { display: none; }
.facture-form { display: grid; gap: var(--space-6); align-content: start; }
.facture-form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.facture-form legend {
padding: 0;
margin-bottom: var(--space-3);
font-size: var(--text-small);
font-weight: 600;
color: var(--color-ink);
}
.facture-options { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.facture-options label { position: relative; }
/* L'input reste dans le flux d'accessibilité : caché à l'œil, pas au clavier ni
au lecteur d'écran. La pastille qui le suit porte l'état. */
.facture-options input {
position: absolute;
inset: 0;
margin: 0;
opacity: 0;
cursor: pointer;
}
.facture-options span {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 10px 18px;
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
background: var(--color-surface-2);
color: var(--color-ink);
font-size: var(--text-small);
transition: background .2s var(--ease-out), border-color .2s var(--ease-out), color .2s var(--ease-out);
}
.facture-options label:hover span { border-color: var(--color-border-strong); }
.facture-options input:checked + span {
background: var(--color-cta);
border-color: var(--color-cta);
color: #fff;
}
.facture-options input:focus-visible + span { box-shadow: var(--shadow-focus); }
.facture-result {
display: flex;
flex-direction: column;
gap: var(--space-4);
padding: var(--space-6);
background: var(--color-dark);
color: #fff;
border-radius: var(--radius-md);
}
.facture-title {
margin: 0;
font-size: var(--text-small);
font-weight: 600;
color: var(--color-on-dark);
}
.facture-lines { display: grid; gap: var(--space-2); margin: 0; }
.facture-lines > div {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--space-4);
font-size: var(--text-small);
}
.facture-lines dt { color: rgba(255, 255, 255, .78); }
.facture-lines dd { margin: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.facture-lines .facture-total,
.facture-lines .facture-reste {
margin-top: var(--space-2);
padding-top: var(--space-3);
border-top: 1px solid rgba(255, 255, 255, .18);
}
.facture-lines .facture-total dt,
.facture-lines .facture-reste dt { color: #fff; font-weight: 600; }
.facture-lines .facture-reste dd { font-size: var(--text-heading); font-weight: 700; }
.facture-note { margin: 0; font-size: var(--text-micro); color: rgba(255, 255, 255, .7); }
.facture-result .btn { align-self: flex-start; margin-top: auto; }
/* La carte de la bouche : trois zones, un matériau conseillé par zone. */
.bouche-wrap {
padding: var(--space-8);
background: var(--color-surface-2);
border-radius: var(--radius-lg);
}
.bouche { display: block; width: 100%; max-width: 420px; height: auto; margin-inline: auto; }
.bouche-zone { fill: none; stroke-width: 30; }
.bouche-zone--devant { stroke: var(--color-blue-300); }
.bouche-zone--premolaires { stroke: var(--color-blue-600); }
.bouche-zone--molaires { stroke: var(--color-dark); }
.bouche-cle--devant { fill: var(--color-blue-300); }
.bouche-cle--premolaires { fill: var(--color-blue-600); }
.bouche-cle--molaires { fill: var(--color-dark); }
.bouche-nom { font-size: 13px; font-weight: 600; fill: var(--color-ink); }
.bouche-mat { font-size: 12px; fill: var(--color-ink-soft); }
@media (max-width: 1024px) {
/* minmax(0,…) et non 1fr : un track 1fr conserve un plancher min-content,
et une ligne de pastilles qui ne se coupe pas élargit alors la grille au-delà
du conteneur. Mesuré à 375 px le 2026-09-14 sur la page détartrage : 409 de
large pour 375 de fenêtre. */
.facture { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
.facture { margin-top: var(--space-10); padding: var(--space-6); }
.bouche-wrap { padding: var(--space-6); }
}
@media (max-width: 480px) {
.facture { padding: var(--space-5); }
.facture-result { padding: var(--space-5); }
.facture-result .btn { align-self: stretch; justify-content: center; }
.bouche-wrap { padding: var(--space-4); }
}
/* Quatre étapes : la grille de base en tient trois et laisse la quatrième
orpheline sur une seconde ligne. Écrit pour /gouttiere-dentaire-dalignement-au-maroc/
le 2026-09-12. Les deux paliers reprennent ceux de .steps, une colonne de moins
à chaque fois plutôt qu'un passage brutal à une seule. */
.steps--quatre { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1180px) { .steps--quatre { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .steps--quatre { grid-template-columns: 1fr; } }
/* .kit n'avait jamais porté plus d'un paragraphe : les trois du bloc
remboursement de /gouttiere-dentaire-dalignement-au-maroc/ se collaient,
mesuré à 0 px le 2026-09-12. */
.kit p + p { margin-top: var(--space-3); }
/* --------------------------------------------------------------------------
Le parcours : le qualificateur de /greffe-osseuse-dentaire-prix-maroc/.
Quatre questions, une estimation, et un message WhatsApp déjà rempli avec
les réponses. Réemploie tout le visuel de .facture ; n'ajoute que les
étapes, les jalons et la navigation. Aucun chiffre ici non plus : les
montants arrivent de content/prices.json au build ({{tarifs:…}}).
Sans JS, le bloc reste masqué et les deux tableaux de prix font le travail.
-------------------------------------------------------------------------- */
.facture--parcours { grid-template-columns: 1.15fr 1fr; }
.facture-form fieldset[hidden] { display: none; }
.parcours-jalons {
display: flex;
gap: var(--space-2);
margin: 0 0 var(--space-2);
padding: 0;
list-style: none;
}
.parcours-jalons li {
flex: 1;
height: 4px;
border-radius: var(--radius-full);
background: var(--color-border);
}
.parcours-jalons li[data-fait] { background: var(--color-cta); }
.parcours-compte {
margin: 0;
font-size: var(--text-micro);
color: var(--color-ink-soft);
}
/* Les réponses de ce parcours sont des phrases, pas des mots : elles
s'empilent au lieu de s'aligner en pastilles. */
.facture-options--colonne { flex-direction: column; align-items: stretch; }
.facture-options--colonne span { justify-content: flex-start; border-radius: var(--radius-md); }
.parcours-nav { display: flex; gap: var(--space-3); align-items: center; }
.parcours-nav .btn { min-height: 44px; }
.parcours-nav [data-parcours-retour][hidden] { display: none; }
@media (max-width: 1024px) {
.facture--parcours { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
.parcours-nav { flex-direction: column-reverse; align-items: stretch; }
.parcours-nav .btn { justify-content: center; }
}
/* --------------------------------------------------------------------------
Le repère post-opératoire de /douleur-apres-implant-dentaire/ (suites.js).
Deux questions, un verdict daté, et un message WhatsApp déjà rempli avec le
jour et le signe. Réemploie tout le visuel de .facture ; n'ajoute que la
sortie, qui est une phrase et non un montant : le libellé passe au-dessus et
la valeur perd le nowrap réservé aux chiffres.
Sans JS, le bloc reste masqué et les deux tableaux de la page le remplacent.
-------------------------------------------------------------------------- */
.facture-verdict > div {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-1);
}
.facture-verdict dt {
font-size: var(--text-micro);
text-transform: uppercase;
letter-spacing: .06em;
}
.facture-verdict dd {
white-space: normal;
font-variant-numeric: normal;
line-height: 1.5;
}
/* Le signe qui sort du cadre est le seul élément en gras de la carte : c'est
l'unique information que le lecteur doit emporter s'il ne lit rien d'autre. */
.facture-verdict .est-alerte {
margin-top: var(--space-2);
padding-top: var(--space-3);
border-top: 1px solid rgba(255, 255, 255, .18);
}
.facture-verdict .est-alerte dt { color: #fff; font-weight: 600; }
.facture-verdict .est-alerte dd { font-weight: 600; }
/* La ligne de relecture, sous le chapô d'une page de santé. Le nœud
MedicalWebPage.reviewedBy déclare au moteur qu'un praticien nommé a relu la
page ; cette ligne le déclare au lecteur. Un nœud qui affirme ce qui ne se
voit nulle part est une déclaration invérifiable. */
.page-signature {
margin-top: var(--space-4);
font-size: var(--text-micro);
color: var(--color-ink-soft);
}
.page-signature a { color: inherit; text-underline-offset: 3px; }
.page-signature a:hover { color: var(--color-ink); }
/* La ligne de nuit de /urgence-dentaire-mohammedia/, révélée par urgence.js
quand le cabinet est fermé. Le h1 de cette page promet « reçu le jour même »
à quelqu'un qui peut la lire à 2 h du matin : la grappe « rage de dent » est
saturée de variantes nocturnes. Sans cette ligne, la page ment à celui qui en
a le plus besoin.
Elle porte --color-warn et non --color-danger : le cabinet fermé est une
contrainte, pas une alerte médicale. Le rouge reste réservé aux signes de
gravité. */
/* 2026-09-17, demande du client : une ligne de texte, petite et simple, pas
un encadré. Le filet jaune disait « avertissement » quand le message n'est
qu'un renseignement d'état. Même traitement que .ferme-note, pour que le
site n'ait qu'une seule façon de dire « c'est fermé ». */
.urgence-nuit {
margin-top: 10px;
color: var(--color-ink-soft);
font-size: var(--text-micro);
line-height: var(--lh-small);
}
.urgence-nuit a {
margin-left: .35em;
color: inherit;
text-underline-offset: 3px;
}
/* .page-head--split pose le chapô sur un fond sombre : la ligne y reprend les
valeurs claires du bloc plutôt que l'encre du corps. */
.page-head--split .urgence-nuit { color: rgba(255, 255, 255, .66); }
/* --------------------------------------------------------------------------
La barre d'article : qui a relu, quand, et ce que la lecture coûte en temps.
Posée sous le premier écran, avant la première section.
Sur un contenu de santé, la relecture par un praticien nommé est le signal
E-E-A-T que Google documente, et le nœud MedicalWebPage.reviewedBy le déclare
au moteur. Cette barre le déclare au lecteur : un nœud qui affirme ce qui ne
se voit nulle part est une déclaration invérifiable.
-------------------------------------------------------------------------- */
/* Elle n'est pas une carte et n'est pas une section : c'est la ligne de crédit
posée en tête de la première section, sur son fond, séparée du chapeau par un
filet et rien d'autre. Une bande à part, entre le premier écran et le premier
titre, lisait comme un encart publicitaire. */
.article-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-5) var(--space-8);
margin-bottom: var(--space-8);
padding-bottom: var(--space-6);
border-bottom: 1px solid var(--color-border);
}
.article-meta-who { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.article-meta-who img {
width: 48px;
height: 48px;
flex: none;
border-radius: var(--radius-full);
object-fit: cover;
}
.article-meta-name { margin: 0; font-size: var(--text-small); font-weight: 600; color: var(--color-ink); }
.article-meta-name a { color: inherit; text-underline-offset: 3px; }
.article-meta-name a:hover { color: var(--color-link); }
.article-meta-role { margin: var(--space-1) 0 0; font-size: var(--text-micro); color: var(--color-ink-soft); }
.article-meta-facts {
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-6);
margin: 0 0 0 auto;
padding: 0;
list-style: none;
}
.article-meta-facts li {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-micro);
color: var(--color-ink-soft);
}
.article-meta-facts svg { flex: none; color: var(--color-border-strong); }
@media (max-width: 768px) {
.article-meta-facts { margin-left: 0; width: 100%; }
}
/* --------------------------------------------------------------------------
Le repère post-opératoire de /douleur-apres-implant-dentaire/ (suites.js).
Deux questions numérotées, un statut, un verdict, et le geste à faire.
Réemploie la carte et les pastilles de .facture ; n'ajoute que la sortie,
qui n'est pas un montant mais une conduite à tenir, et qui doit se lire
d'un coup d'œil sur un téléphone à deux heures du matin.
La couleur porte l'information : le statut est la seule chose qu'un lecteur
inquiet retient s'il ne lit rien d'autre.
Sans JS, le bloc reste masqué et les deux tableaux de la page le remplacent.
-------------------------------------------------------------------------- */
/* Une colonne, pas deux : les deux questions sont devenues des listes
déroulantes le 2026-09-15, et quatorze pastilles empilées faisaient une
section deux fois plus haute que ce qu'elle disait. Les deux listes tiennent
sur une ligne, la sortie prend toute la largeur en dessous. */
.facture--triage { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
.facture--triage .facture-form {
grid-template-columns: 1fr 1fr;
gap: var(--space-5);
align-items: end;
}
.facture-field { display: grid; gap: var(--space-3); min-width: 0; }
.facture-field[hidden] { display: none; }
.facture-label {
display: flex;
align-items: center;
gap: var(--space-3);
font-size: var(--text-small);
font-weight: 600;
color: var(--color-ink);
}
.facture-select {
width: 100%;
min-height: 48px;
padding: 0 var(--space-10) 0 var(--space-4);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-md);
background-color: var(--color-surface);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23565D77' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--space-4) center;
background-size: 16px 16px;
color: var(--color-ink);
font: inherit;
font-size: var(--text-small);
appearance: none;
cursor: pointer;
}
.facture-select:hover { border-color: var(--color-ink-soft); }
.facture-select:focus-visible { outline: none; border-color: var(--color-cta); box-shadow: var(--shadow-focus); }
.facture-step-n {
display: grid;
place-items: center;
width: 26px;
height: 26px;
flex: none;
border-radius: var(--radius-full);
background: var(--color-surface-3);
color: var(--color-blue-700);
font-size: var(--text-micro);
font-weight: 700;
}
.triage-out {
display: flex;
flex-direction: column;
gap: var(--space-4);
padding: var(--space-6);
background: var(--color-dark);
color: #fff;
border-radius: var(--radius-md);
}
.triage-statut {
display: inline-flex;
align-items: center;
gap: var(--space-2);
align-self: flex-start;
margin: 0;
padding: 6px 12px;
border-radius: var(--radius-full);
font-size: var(--text-micro);
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
}
.triage-statut[data-niveau="ok"] { background: rgba(255, 255, 255, .12); color: #8FE3B4; }
.triage-statut[data-niveau="avant"] { background: rgba(255, 255, 255, .12); color: var(--color-on-dark); }
.triage-statut[data-niveau="alerte"] { background: var(--color-danger); color: #fff; }
.triage-verdict {
margin: 0;
font-size: var(--text-strong);
line-height: var(--lh-lead);
color: #fff;
}
.triage-detail {
margin: 0;
padding-top: var(--space-4);
border-top: 1px solid rgba(255, 255, 255, .18);
}
.triage-detail-label {
margin: 0 0 var(--space-1);
font-size: var(--text-micro);
letter-spacing: .06em;
text-transform: uppercase;
color: rgba(255, 255, 255, .62);
}
.triage-detail p { margin: 0; font-size: var(--text-small); line-height: 1.5; color: rgba(255, 255, 255, .88); }
.triage-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: auto; }
.triage-actions .btn[hidden] { display: none; }
.triage-note { margin: 0; font-size: var(--text-micro); color: rgba(255, 255, 255, .6); }
@media (max-width: 768px) {
.facture--triage .facture-form { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
.triage-actions .btn { flex: 1 1 100%; justify-content: center; }
}
/* --------------------------------------------------------------------------
Le rappel : une phrase qui appelle un geste, et le geste juste dessous.
Écrit sous le tableau des seuils de /douleur-apres-implant-dentaire/, où la
phrase et le numéro de téléphone étaient séparés par huit cents mots.
Le liseré rouge est le seul usage de --color-danger en dehors d'un statut.
-------------------------------------------------------------------------- */
.rappel {
display: grid;
gap: var(--space-5);
margin-top: var(--space-10);
/* 🔧 2026-09-16 : --space-7 n'existe pas dans tokens.css (1 2 3 4 5 6 8 10 12
16 20 24). Une valeur invalide dans un raccourci annule la déclaration
ENTIÈRE, sans erreur : ce bloc avait donc un remplissage de zéro, texte
collé au liseré rouge. Latent, aucune page n'emploie encore .rappel. */
padding: var(--space-6) var(--space-8);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-left: 4px solid var(--color-danger);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
}
.rappel p { margin: 0; }
.rappel-lede {
max-width: 60ch;
font-size: var(--text-strong);
line-height: var(--lh-lead);
color: var(--color-ink);
}
.rappel-note { font-size: var(--text-small); color: var(--color-ink-soft); }
.rappel-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
@media (max-width: 480px) {
.rappel { padding: var(--space-6); }
.rappel-actions .btn { flex: 1 1 100%; justify-content: center; }
}
/* --------------------------------------------------------------------------
Cibles tactiles — `3.4.1`
Le doigt demande 44 px, l'œil n'en demande pas. Ces commandes gardent leur
dessin exact au pixel près : un pseudo-élément centré sur elles étend la
zone touchée, sans rien peindre et sans rien déplacer. `max(100%, 44px)`
garantit que la zone ne rétrécit jamais l'élément qu'elle recouvre.
Aucune de ces règles n'écrase un `::after` existant, vérifié avant d'écrire.
Trois-quarts des manques étaient de la hauteur et non de la largeur : un
numéro de téléphone en pied de page fait 335 px de large et 22 px de haut.
Élargir n'aurait rien donné, c'est la hauteur qu'il fallait aller chercher.
Les pastilles du carrousel ne sont pas ici : 7 px espacés de 7 px ne peuvent
pas recevoir 44 px chacune sans se recouvrir, et la zone du voisin gagnerait.
Cas laissé ouvert, il demande une décision de dessin.
-------------------------------------------------------------------------- */
.brand,
.nav-toggle,
.drawer-close,
.footer-social a,
.footer-contact a,
.profile-social a,
.link-more,
.rail-arrows button { position: relative; }
/* `.carousel-nav` n'est pas dans la liste ci-dessus, et c'est le point à ne pas
manquer : elle est déjà `position: absolute`, donc déjà un bloc de référence
pour son propre `::after`. Lui poser `relative` lui retirait son placement et
l'envoyait 90 px sous le carrousel. Invisible jusqu'ici parce qu'elle vivait à
`opacity: 0` hors survol ; la rendre visible sur mobile l'a révélé. */
.brand::after,
.nav-toggle::after,
.drawer-close::after,
.footer-social a::after,
.footer-contact a::after,
.profile-social a::after,
.link-more::after,
.carousel-nav::after,
.rail-arrows button::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: max(100%, 44px);
height: max(100%, 44px);
transform: translate(-50%, -50%);
}
/* --------------------------------------------------------------------------
Le trieur — quatre cartes de choix
Ajouté le 2026-09-16 pour /gouttiere-dentaire/, additif, une seule page
l'emploie pour l'instant. Refait le même jour sur une référence apportée
par le client : carte haute, sujet posé sur un panneau teinté, bloc de texte
en pied, bouton rond sombre à droite.
Pourquoi pas .kit-grid. Cette grille est réglée pour CINQ cartes (2+2+2 puis
3+3) : avec quatre, la rangée du haut s'arrête aux deux tiers et laisse un
trou de deux colonnes à droite. Mesuré en capture, et c'est ce trou qui
faisait lire la bande comme un bug.
🔑 LE PANNEAU EST DÉJÀ AU FORMAT DES PHOTOS. `aspect-ratio: 1/1` et un `img`
en `object-fit: cover` : le jour où le cabinet livre la photo de gouttière
occlusale qui manque à la bibliothèque, les quatre `svg` deviennent quatre
`img` sans une ligne de CSS à changer. Les 88 images du dépôt couvrent
l'alignement, le blanchiment et la contention ; aucune ne montre une
gouttière de bruxisme. Quatre icônes valent mieux que trois photos et une
icône, qui romprait la série sur la seule carte que l'œil irait chercher.
⚠️ CE QUI N'A PAS ÉTÉ REPRIS DE LA RÉFÉRENCE : la pastille « Sale » et
« Best Sellers ». Elle vient d'une boutique. Sur un appareil médical elle
ferait exactement ce que le client a demandé d'éviter, le registre catalogue.
Le rail, les flèches et la barre de progression ne sont pas repris non plus :
quatre cartes tiennent en largeur, et cacher la quatrième derrière une flèche
coûterait un tri au lecteur au lieu de le lui rendre.
Trois lignes en pied, et chacune porte quelque chose : le BESOIN en petit,
parce que le lecteur arrive avec son problème et non avec le nom de
l'appareil ; le NOM CLINIQUE en fort, le mot qu'il devra prononcer au
cabinet ; un FAIT à la place du prix, voix-kandil §3.1.
Les durées passent par --dur-*, donc `prefers-reduced-motion` les met à zéro
sans une règle de plus (tokens.css ligne 170).
-------------------------------------------------------------------------- */
.tri-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.tri {
position: relative;
display: flex;
flex-direction: column;
/* Sans panneau, la carte respire par le haut. Le retrait des icônes est une
décision du client du 2026-09-16 : elles ne portaient pas, et un carré
teinté vide en attendant les photos aurait lu comme une image cassée. */
padding: var(--space-6) var(--space-5) var(--space-5);
background: var(--color-surface);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
text-decoration: none;
color: inherit;
transition: transform var(--dur-base) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out);
}
.tri:hover,
.tri:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow-deep); }
.tri:focus-visible { outline: none; box-shadow: var(--shadow-deep), var(--shadow-focus); }
/* Le panneau du sujet. Carré, donc prêt pour les photos 1080x1080 du cabinet. */
.tri-shot {
display: grid;
place-items: center;
aspect-ratio: 1 / 1;
border-radius: var(--radius-md);
background: var(--color-surface-3);
overflow: hidden;
color: var(--color-blue-600);
transition: background var(--dur-base) var(--ease-out);
}
.tri-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tri-shot svg { width: 52%; height: auto; }
.tri:hover .tri-shot { background: var(--color-blue-100); }
/* Une carte qui porte un panneau reprend le rythme serré du haut. Les règles
ci-dessus sont gardées telles quelles pour le jour où le cabinet livre les
quatre photos : il suffira de remettre le dans le
markup, sans rien changer ici. */
.tri:has(.tri-shot) { padding: var(--space-4) var(--space-4) var(--space-5); }
.tri:has(.tri-shot) .tri-body { padding-top: var(--space-5); }
.tri-body { padding: 0 var(--space-1) 0; }
/* Le besoin, en tête. Il prend la forme du sur-titre du site plutôt que celle
d'un paragraphe : sans cela il pesait autant que le fait en pied, et les deux
lignes grises encadraient le nom sans hiérarchie. C'est la place que la
référence donne à la catégorie du produit. */
.tri-need {
display: block;
margin-bottom: var(--space-2);
color: var(--color-cta);
font-size: var(--text-micro);
font-weight: var(--w-medium);
letter-spacing: var(--track-label);
text-transform: uppercase;
}
.tri h3 {
margin: 0;
font-size: var(--text-strong);
font-weight: var(--w-medium);
letter-spacing: var(--track-heading);
line-height: var(--lh-heading);
color: var(--color-ink);
}
/* Le fait, à la place où la référence met le prix. Règle 6 : jamais un montant. */
.tri-fact {
display: block;
margin-top: var(--space-2);
font-size: var(--text-small);
line-height: var(--lh-small);
color: var(--color-ink-soft);
}
/* Le bouton rond. 44 px pleins : c'est la cible tactile minimale, et il porte
l'affordance que quatre lignes de texte ne portent pas.
Il est DANS LE FLUX, poussé en bas par margin-top:auto, et non posé en
absolu dans le coin. En absolu il fallait lui réserver 60 px sur toute la
hauteur de la colonne de texte, alors qu'il n'en croise que la dernière
ligne : le fait tombait sur quatre lignes au lieu de deux. Dans le flux, le
texte prend toute la largeur et les quatre boutons restent alignés, puisque
c'est la même marge automatique qui les pousse. */
.tri-go {
margin-top: auto;
align-self: flex-end;
width: 44px; height: 44px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--radius-full);
background: var(--color-dark);
color: var(--color-surface);
transition: background var(--dur-base) var(--ease-out),
transform var(--dur-base) var(--ease-out);
}
.tri:hover .tri-go,
.tri:focus-visible .tri-go { background: var(--color-blue-600); transform: scale(1.06); }
/* L'écart minimal entre le fait et le bouton quand la carte est la plus haute
de la rangée : sans lui, margin-top:auto vaut zéro et les deux se touchent. */
.tri-body { margin-bottom: var(--space-5); }
@media (max-width: 1024px) { .tri-grid { grid-template-columns: repeat(2, 1fr); } }
/* Sous 480 px, une colonne. La carte couchée en rangée a été retirée le
2026-09-16 avec les icônes : elle n'existait que pour empêcher le panneau
carré de faire 327 px de haut sur un téléphone. Sans panneau, la carte de
texte tient déjà en 150 px et la rangée n'a plus d'objet. Elle reviendra avec
les photos, si elles arrivent. */
@media (max-width: 480px) {
.tri-grid { grid-template-columns: 1fr; gap: var(--space-3); }
.tri { padding: var(--space-5); }
}
/* Variante à trois cartes, 2026-09-16, pour /hollywood-smile/ et ses trois
chemins. Additive : .tri-grid reste réglée pour quatre.
🔑 Elle ne passe JAMAIS par deux colonnes. C'est la leçon de la première
version du trieur de /gouttiere-dentaire/, qui employait .kit-grid réglée
pour cinq : avec quatre cartes, la rangée s'arrêtait aux deux tiers et
laissait un trou. Trois cartes dans deux colonnes font le même trou, donc
le trio garde ses trois colonnes jusqu'à 768 px, puis tombe à une seule. */
.tri-grid--trio { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
/* 🔧 2026-09-16. .tri est réglée pour QUATRE colonnes, soit des cartes de
277 px : ses marges de 20 px y sont justes. À trois colonnes la carte fait
372 px et les mêmes 20 px deviennent un liseré. Le remplissage et l'écart
suivent donc la largeur, et l'écart rejoint les 24 px des autres grilles de
cartes du site, .ba-grid en tête. Rien de tout cela ne touche le trieur à
quatre cartes de /gouttiere-dentaire/. */
.tri-grid--trio .tri { padding: var(--space-8) var(--space-6) var(--space-6); }
.tri-grid--trio .tri-body { padding: 0; }
/* 🔧 2026-09-16. Le bloc de texte qui suit les cartes les touchait : écart
mesuré à ZÉRO, quand l'en-tête de section en a 48 au-dessus des mêmes cartes.
La grille n'a pas de marge basse, et .duo-copy pas de marge haute. On reprend
les 48 px de l'en-tête pour que la section respire au même rythme en haut et
en bas des cartes. */
.tri-grid--trio + .duo-copy { margin-top: var(--space-12); }
@media (max-width: 1024px) { .tri-grid--trio { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .tri-grid--trio { grid-template-columns: 1fr; } }
/* ═══ Le déroulé en diapositives · /hollywood-smile/ · 2026-09-16 ══════════════
Deux colonnes qui changent ENSEMBLE : le texte à gauche, la photo à droite.
Bâti sur carousel.js, sans second moteur, parce qu'il porte déjà le fondu,
les points, les flèches, le clavier, la pause au survol et le respect de
`prefers-reduced-motion`.
🔑 LES DIAPOSITIVES SONT EMPILÉES EN GRILLE, PAS EN ABSOLU. Le carrousel
d'origine pose ses vues en `position: absolute` dans une piste au format
carré : il montre des images, dont la hauteur est connue d'avance. Ici chaque
vue porte un texte de longueur différente. Toutes occupent la même cellule
`grid-area: 1 / 1`, donc la piste prend la hauteur de la PLUS HAUTE et rien
ne saute d'une vue à l'autre.
🔑 LES COMMANDES SORTENT DE L'IMAGE. Les flèches du carrousel d'origine
flottent au milieu, en blanc sur un fond sombre, et n'apparaissent qu'au
survol. Sur deux colonnes, la flèche de gauche tomberait en blanc sur le
texte, et « au survol » n'existe pas au doigt. Elles descendent donc sous la
piste, visibles en permanence, et à 44 px. */
.etapes { position: relative; border-radius: 0; overflow: visible; background: none; box-shadow: none; }
.etapes .carousel-track {
/* La jauge s'y accroche en absolu : sans cette ligne elle se poserait sur
.etapes, qui descend jusque sous la rangée de boutons. */
position: relative;
display: grid;
aspect-ratio: auto;
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--color-surface);
border: 1px solid var(--color-border);
}
.etapes .carousel-slide {
position: relative;
inset: auto;
grid-area: 1 / 1;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: stretch;
}
.etape-copy {
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--space-3);
/* 🔧 Le remplissage valait ZÉRO jusqu'au 2026-09-16, et le texte touchait le
bord du cadre. --space-7 n'existe pas, et une valeur invalide dans un
raccourci `padding` annule la déclaration entière sans rien signaler.
40 px donnent ici une mesure de 493 px, soit une soixantaine de signes par
ligne, dans la fourchette lisible. */
padding: var(--space-10);
}
.etape-rang {
color: var(--color-ink-soft);
font-size: var(--text-micro);
font-weight: var(--w-medium);
letter-spacing: var(--track-label);
text-transform: uppercase;
}
.etape-copy h3 { margin: 0; color: var(--color-ink); }
.etape-copy p { margin: 0; color: var(--color-ink-soft); }
.etape-shot { position: relative; min-height: 340px; background: var(--color-surface-2); }
.etape-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* La barre de commandes, sous la piste, alignée sur la colonne de texte. */
.etapes-commandes {
display: flex;
align-items: center;
gap: var(--space-3);
margin-top: var(--space-4);
}
.etapes .carousel-nav {
position: static;
flex: none;
box-sizing: border-box;
margin: 0;
width: 44px; height: 44px;
border-color: var(--color-border-strong);
background: var(--color-surface);
color: var(--color-ink);
opacity: 1;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.etapes .carousel-nav:hover { background: var(--color-surface-3); }
.etapes .carousel-dots { position: static; flex: 1; justify-content: center; gap: 0; }
/* Le point reste fin à l'œil, mais sa zone touchable fait 44 px de CÔTÉ :
c'est du remplissage transparent, pas un point plus gros.
🔧 Passé de 26 à 44 px de large le 2026-09-16. À 26, `measure --tap` sondait
à 22 px du centre et tombait sur le point VOISIN : la cible existait, elle
n'était simplement pas atteignable au doigt. */
.etapes .carousel-dots button {
flex: none;
height: 44px;
width: 44px;
padding: 0;
background: none;
border-radius: 0;
position: relative;
}
.etapes .carousel-dots button::after {
content: "";
position: absolute;
top: 50%; left: 50%;
margin: -3px 0 0 -11px;
width: 22px; height: 6px;
border-radius: var(--radius-full);
background: var(--color-border-strong);
transition: background-color var(--dur-base) var(--ease-out);
}
.etapes .carousel-dots button[aria-selected="true"]::after { background: var(--color-cta); }
.etapes-pause {
display: inline-flex; align-items: center; justify-content: center;
flex: none;
box-sizing: border-box;
gap: var(--space-2);
height: 44px;
padding: 0 var(--space-4);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-full);
background: var(--color-surface);
color: var(--color-ink-soft);
font-size: var(--text-small);
cursor: pointer;
}
.etapes-pause:hover { background: var(--color-surface-3); }
/* 🔑 Sans cette ligne le bouton reste VISIBLE quand carousel.js le masque.
`display` posé par une classe d'auteur bat `[hidden] { display: none }` de la
feuille du navigateur, qui n'est qu'une feuille utilisateur-agent. Le dépôt
porte déjà ce correctif cinq fois, sur .facture, .facture-field, les fieldsets
du parcours et les boutons du triage. Sans lui, le bouton d'arrêt
s'afficherait sous `prefers-reduced-motion` en ne commandant plus rien. */
.etapes-pause[hidden] { display: none; }
.etapes-pause .etapes-pause-reprendre,
.etapes.is-held .etapes-pause .etapes-pause-arreter { display: none; }
.etapes.is-held .etapes-pause .etapes-pause-reprendre { display: inline; }
@media (max-width: 1024px) {
.etape-copy { padding: var(--space-8); }
.etape-shot { min-height: 300px; }
}
/* Sous 768 px la photo passe AU-DESSUS du texte. L'ordre du DOM garde le texte
en premier, qui est l'ordre de lecture et celui du clavier ; seul l'affichage
s'inverse, parce qu'une photo ouvre mieux une carte qu'un intertitre. */
@media (max-width: 768px) {
.etapes .carousel-slide { grid-template-columns: 1fr; }
.etape-shot { order: -1; min-height: 0; aspect-ratio: 16 / 10; }
.etape-copy { padding: var(--space-6) var(--space-5) var(--space-8); }
}
/* 🔑 SOUS 768 px LES POINTS DISPARAISSENT, et rien n'est perdu. Cinq cibles de
44 px plus deux flèches et un bouton d'arrêt ne tiennent pas dans 335 px de
contenu : la rangée se comprimait, et `measure --tap` a vu la flèche gauche
devenir inatteignable avant que l'œil ne voie quoi que ce soit. La position
dans la série est déjà écrite en toutes lettres au-dessus du titre, « Étape 3
sur 5 », donc les points ne portaient qu'une redite. */
@media (max-width: 768px) {
.etapes .carousel-dots { display: none; }
.etapes-commandes { justify-content: flex-start; }
.etapes-pause { margin-left: auto; }
}
@media (max-width: 480px) {
.etapes-commandes { gap: var(--space-2); }
.etapes-pause { padding: 0 var(--space-3); }
}
/* ═══ Le déroulé, la part vivante · 2026-09-16 ════════════════════════════════
Quatre mouvements, et chacun porte une information. Aucun n'est décoratif,
et TOUS disparaissent sous `prefers-reduced-motion`.
1. La jauge dit combien de temps il reste avant la vue suivante. C'est ce qui
fait comprendre, sans une ligne de texte, que le bloc avance tout seul et
qu'on peut l'arrêter.
2. Le texte monte de dix pixels en apparaissant, en trois temps décalés :
le rang, le titre, puis le paragraphe. L'œil suit l'ordre de lecture.
3. La photo se détend d'un quart de pour cent sur une seconde et demie.
4. Elle se rapproche au survol, parce qu'une image qui ne répond à rien passe
pour un fond.
🔑 LA JAUGE EST PILOTÉE PAR LE JS, PAS PAR :hover EN CSS. Les deux auraient
divergé : le minuteur s'arrête aussi au focus, à la pause, et redémarre à
zéro quand la souris repart. Une barre figée pendant qu'une vue défile est
pire que pas de barre. carousel.js arme et fige, personne d'autre. */
.etapes-jauge {
position: absolute;
left: 0; right: 0; bottom: 0;
height: 3px;
background: var(--color-border);
overflow: hidden;
}
.etapes-jauge i {
display: block;
height: 100%;
background: var(--color-cta);
transform: scaleX(0);
transform-origin: left center;
animation: etapes-remplir var(--etapes-duree, 9000ms) linear forwards;
}
@keyframes etapes-remplir { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* Le texte, en trois temps. Le décalage suit l'ordre de lecture et rien d'autre. */
.etapes .etape-rang,
.etapes .etape-copy h3,
.etapes .etape-copy p {
opacity: 0;
transform: translateY(10px);
transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.etapes .carousel-slide.is-active .etape-rang { opacity: 1; transform: none; transition-delay: 60ms; }
.etapes .carousel-slide.is-active .etape-copy h3 { opacity: 1; transform: none; transition-delay: 130ms; }
.etapes .carousel-slide.is-active .etape-copy p { opacity: 1; transform: none; transition-delay: 200ms; }
.etape-shot img {
transform: scale(1.025);
transition: transform 1.5s var(--ease-out);
}
.etapes .carousel-slide.is-active .etape-shot img { transform: scale(1); }
.etapes .carousel-slide.is-active:hover .etape-shot img { transform: scale(1.04); }
/* Le geste tactile : le doigt tire la vue, et le curseur dit que c'est possible. */
.etapes[data-carousel-swipe] .carousel-track { cursor: grab; touch-action: pan-y; }
.etapes[data-carousel-swipe].is-tire .carousel-track { cursor: grabbing; }
/* ⛔ Sous `prefers-reduced-motion`, il ne reste RIEN de tout cela. La jauge
disparaît plutôt que de se figer pleine, parce qu'une barre immobile sous une
vue qui ne défile pas ne veut plus rien dire. Le bouton d'arrêt s'efface avec
elle, et c'est carousel.js qui s'en charge. */
@media (prefers-reduced-motion: reduce) {
.etapes-jauge { display: none; }
.etapes .etape-rang,
.etapes .etape-copy h3,
.etapes .etape-copy p { opacity: 1; transform: none; transition: none; }
.etape-shot img,
.etapes .carousel-slide.is-active:hover .etape-shot img { transform: none; transition: none; }
}
/* --------------------------------------------------------------------------
Dock d'actions, desktop uniquement
Les trois mêmes actions que la barre mobile, dans le même ordre, mais posées
en bas à droite : c'est là qu'un lecteur d'ordinateur cherche une action
flottante, et c'est le seul endroit qui ne recouvre jamais un titre.
Au repos, trois pastilles rondes. Au survol ou au clavier, la pastille
s'allonge et découvre son libellé. Le libellé est toujours dans le document,
seulement replié : un lecteur d'écran l'annonce même fermé.
-------------------------------------------------------------------------- */
.dock {
position: fixed;
right: var(--space-5);
bottom: var(--space-5);
z-index: var(--z-sticky);
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 10px;
opacity: 0;
transform: translateX(14px);
pointer-events: none;
transition: opacity var(--dur-base) var(--ease-out),
transform var(--dur-base) var(--ease-out);
}
.dock.is-in {
opacity: 1;
transform: none;
pointer-events: auto;
}
.dock-item {
display: flex;
align-items: center;
height: 48px;
border-radius: var(--radius-full);
background: var(--color-surface);
border: 1px solid var(--color-border);
box-shadow: var(--shadow-lift);
color: var(--color-ink-soft);
text-decoration: none;
transition: color var(--dur-fast) var(--ease-out),
box-shadow var(--dur-fast) var(--ease-out);
}
.dock-icon {
display: grid;
place-items: center;
flex: 0 0 46px;
width: 46px;
height: 46px;
}
/* Le libellé est une colonne de grille qui vaut zéro au repos et une fraction
ouverte au survol : la largeur s'anime sans qu'aucun nombre soit écrit à la
main, donc sans risque de coupure si la police charge tard. */
.dock-label {
display: grid;
grid-template-columns: 0fr;
transition: grid-template-columns var(--dur-base) var(--ease-out);
}
.dock-label > span {
overflow: hidden;
white-space: nowrap;
padding-right: 0;
font-size: var(--text-small);
font-weight: var(--w-medium);
letter-spacing: var(--track-body);
opacity: 0;
transition: opacity var(--dur-fast) var(--ease-out),
padding-right var(--dur-base) var(--ease-out);
}
.dock-item:hover .dock-label,
.dock-item:focus-visible .dock-label { grid-template-columns: 1fr; }
.dock-item:hover .dock-label > span,
.dock-item:focus-visible .dock-label > span { padding-right: 18px; opacity: 1; }
.dock-item:hover { color: var(--color-ink); box-shadow: var(--shadow-deep); }
.dock-item:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
/* L'appel est l'action principale : c'est la seule qui porte la couleur,
exactement comme dans la barre mobile. */
.dock-item.is-primary {
background: var(--color-cta);
border-color: transparent;
color: #FFFFFF;
}
.dock-item.is-primary:hover { background: var(--color-cta-hover); color: #FFFFFF; }
/* Sous 768, la barre mobile prend le relais : jamais les deux à la fois. */
@media (max-width: 768px) {
.dock { display: none; }
}
/* Deux cadrages d'image, sortis d'attributs `style=` en ligne le 2026-09-18.
La CSP du .htaccess déclare `style-src 'self'` : un attribut `style=` y est
bloqué comme l'est un script en ligne. Les élargir en `'unsafe-inline'` pour
deux déclarations affaiblirait la règle sur tout le site. */
.pos-45-45 { object-position: 45% 45%; }
.pos-66-38 { object-position: 66% 38%; }
/* --------------------------------------------------------------------------
⚠️ CE BLOC DOIT RESTER LE DERNIER DU FICHIER, et ce n'est pas une preference
de rangement : six regles `. .eyebrow` plus haut dans ce fichier
redeclarent `display: block` (profile-body, visite-inner, cabinet-inner,
page-head, cv-head, duo-copy). Elles ont EXACTEMENT la meme specificite que
celles ci-dessous, donc c'est la derniere ecrite qui gagne.
Pose a sa place logique, juste apres .section-head, le bloc ne marchait que
sur deux des huit contextes : le filet apparaissait sur l'accueil et nulle
part ailleurs. Le defaut etait invisible autrement qu'a l'oeil, car un
::before inline dans un parent en display:block garde ses width/height sans
effet et ne rend rien du tout. Vu sur la bande marine du pied de page.
-------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
Le filet du sur-titre — troisième geste repris d'Ibn Sina (D-040)
Un trait de 28 px devant le sur-titre. Il ne dit rien, il place : l'œil trouve
le début du bloc avant d'avoir lu un mot, et c'est de là que vient une bonne
part du « calme » qu'on est venu chercher.
⚠️ Portée VOLONTAIREMENT restreinte. `.eyebrow` est posé 337 fois dans le
site, dans des contextes qui n'ont rien d'éditorial et dont plusieurs fixent
déjà `display`. Une règle sur `.eyebrow` nu aurait donc changé 337 endroits
pour en viser huit, et cassé la mise en page de ceux qui vivent dans une
grille. Les huit ci-dessous sont les sur-titres qui ouvrent un bloc de texte.
Sur fond marine, le filet prend la couleur claire, sinon il disparaît.
-------------------------------------------------------------------------- */
.section-head .eyebrow,
.page-head .eyebrow,
.split-copy .eyebrow,
.duo-copy .eyebrow,
.cabinet-inner .eyebrow,
.cv-head .eyebrow,
.profile-body .eyebrow,
.visite-inner .eyebrow {
display: flex;
align-items: center;
gap: var(--space-3);
}
.section-head .eyebrow::before,
.page-head .eyebrow::before,
.split-copy .eyebrow::before,
.duo-copy .eyebrow::before,
.cabinet-inner .eyebrow::before,
.cv-head .eyebrow::before,
.profile-body .eyebrow::before,
.visite-inner .eyebrow::before {
content: '';
flex: none;
width: 28px;
height: 1px;
background: currentColor;
opacity: .5;
}
/* Centré, le bloc-tête met son filet des deux côtés : un seul trait à gauche
d'un titre centré tire l'œil de travers. */
.section-head--center .eyebrow { justify-content: center; }
.section-head--center .eyebrow::after {
content: '';
flex: none;
width: 28px;
height: 1px;
background: currentColor;
opacity: .5;
}
@media (max-width: 480px) {
.section-head .eyebrow::before,
.page-head .eyebrow::before,
.split-copy .eyebrow::before,
.duo-copy .eyebrow::before,
.cabinet-inner .eyebrow::before,
.cv-head .eyebrow::before,
.profile-body .eyebrow::before,
.visite-inner .eyebrow::before { width: 18px; }
}