/* ========================================================================== LOT D — les huit pages de soin restantes Dentisterie pédiatrique · Endodontie · Dents de sagesse · Implants et prothèses · Orthodontie · Soin des gencives · Smile Concept · Blanchiment Chargé après pages.css, avec les autres feuilles de lot, par ordre alphabétique. Deux règles d'hygiène tenues sans exception ici : 1. AUCUN sélecteur nu partagé. Tout est préfixé `.gdc-lotd` ou porte un nom propre au lot (`gdc-lotd-*`). La feuille est servie sur tout le site : une règle nue piloterait les pages des autres intervenants, c'est le défaut B9 relevé sur le lot B. 2. AUCUNE dépendance à lot-a.css ni à lot-b.css. Les briques visuellement voisines (duo image/texte, bandes à coches) y sont déclarées sans préfixe de lot et sont en cours de correction : le lot D redéclare les siennes plutôt que de s'y accrocher. Le tronc commun réellement partagé et stable reste emprunté à pages.css : héros, bandeau des 4 arguments, bandeau d'accès, FAQ, boutons. ========================================================================== */ /* ========================================================================== LARGEUR DE CONTENU — conformité XD (défauts A1 et B1) XD : tout le contenu centré est calé de x=200 à x=1720, soit 1520 px. pages.css borne déjà `.elementor-container` à 1520 px, mais Elementor lui ajoute une gouttière interne de 2vw (38,4 px à 1920) : le contenu retombe à 1443 px et démarre à x=238. On rend cette gouttière au conteneur, sans discontinuité : au-dessus de 1520 px de fenêtre elle vaut 0, en dessous elle remonte progressivement jusqu'à la marge du thème. Aucun palier, donc aucun saut de largeur au redimensionnement. ========================================================================== */ .gdc-lotd.gdc-section > .elementor-container { padding-inline: max(0px, min(var(--gdc-marge), 1520px - 100vw)); } /* ========================================================================== HÉROS ========================================================================== */ /* Défaut A4 : `.gdc-hero` ne déclare que padding-block, et son conteneur est un item flex en largeur adaptée au contenu. La marge latérale n'est alors que le reliquat de la dernière ligne de texte : sous 430 px le titre venait toucher le bord de l'écran. On la déclare, une bonne fois. */ .gdc-lotd.gdc-hero > .elementor-container { width: 100%; max-width: var(--gdc-contenu); padding-inline: clamp(1.25rem, 5vw, 8.75rem); } /* Défaut A11 : le XD donne au bouton du héros 474 x 121 px et un libellé de 30 px, comme celui de l'en-tête. Sans cela il héritait de --fs-h3 (40 px). */ .gdc-lotd .gdc-hero__actions .gdc-btn { font-size: var(--fs-body); min-width: min(100%, 29.625rem); /* 474 px au XD */ } /* Voile du héros — contraste AA sur une photo (défaut A7) pages.css pose un voile de rgba(20,18,14,.28) à .45. Mesuré au pixel sur mes huit photos, il ne suffit pas : sur Dents de sagesse à 1440 px, le fond sous le H1 tombe à 3,09:1 médian et 49 % des pixels passent sous le seuil AA de 3:1 applicable au grand texte. Les dents blanches et les blouses claires du cadrage médical sont plus lumineuses que les photos d'ambiance des autres lots. On renforce le voile sur les seules pages du lot D : la photo reste lisible, le titre devient lisible partout. Un voile plus dense est aussi ce que voit un patient au soleil, sur son téléphone, quand il cherche à joindre la clinique. */ .gdc-lotd.gdc-hero::before { background: linear-gradient(180deg, rgba(20, 18, 14, .46) 0%, rgba(20, 18, 14, .60) 100%); } /* Dentisterie pédiatrique : le XD capitalise le H1. La capitale est décorative, elle se pose en CSS et non dans le texte, pour que l'arbre d'accessibilité et le référencement reçoivent la casse normale. */ .gdc-lotd-hero--maj h1.elementor-heading-title { text-transform: uppercase; } /* ========================================================================== BANDEAU DES 4 ARGUMENTS — gouttière du XD XD : pictos centrés à x=337, 752, 1168, 1583, soit un pas de 415 px sur une largeur de contenu de 1520. Quatre colonnes et trois gouttières donnent donc 275 px de colonne et 140 px de gouttière. La section porte déjà la marge de page : ici on ne retire que la gouttière interne d'Elementor, sinon le contenu ne ferait plus 1520 px. ========================================================================== */ .gdc-lotd.gdc-raisons > .elementor-container { padding-inline: 0; gap: var(--gdc-marge); } /* Les cellules de prix du XD tiennent sur deux lignes (« Dès CHF 120.- » puis sa précision). Le
vient du contenu, l'interligne serré vient d'ici. */ .gdc-lotd .gdc-raison__texte p { line-height: var(--lh-serre); } /* ========================================================================== CTA ISOLÉ AU CENTRE XD : bouton seul après le chapeau, x=723 largeur 474, donc centré. ========================================================================== */ .gdc-lotd-cta { display: flex; justify-content: center; padding-block: var(--esp-l) 0; } .gdc-lotd-cta .gdc-btn img { width: clamp(1.5rem, 2.6vw, 3.125rem); height: auto; } /* ========================================================================== DUO IMAGE / TEXTE XD : visuel rond bordé or de 600 px, texte aligné en haut, le côté du visuel donné par son x (100 à gauche, 1220 à droite). Vérifié sur xd/artboards : c'est bien un cercle, pas un rectangle débordant — la spec annote « 0x0 » parce que le calque est groupé. La section est en pleine largeur : sans cela Elementor la bride à 1140 px. L'ordre visuel suit l'ordre du DOM ; pas de row-reverse, qui inverserait l'ordre de lecture sans changer le rendu. ========================================================================== */ /* XD : visuel de 600 px posé tous les 800 px, soit 100 px au-dessus et au-dessous. --esp-xl (140 px) aurait donné un pas de 880 (défaut A9 en sens inverse) : on cale la valeur du XD. */ .gdc-lotd-duo { padding: clamp(2.5rem, 5.2vw, 6.25rem) var(--gdc-marge); } .gdc-lotd-duo > .elementor-container { max-width: 100%; align-items: flex-start; gap: var(--esp-l); } /* Elementor pose deux colonnes à 50 %. Le XD donne 600 px au visuel et tout le reste au texte : le rond se retrouverait sinon flottant au milieu de sa moitié, et le texte décalé vers la droite. */ .gdc-lotd-duo__media { flex: 0 0 min(100%, 37.5rem); max-width: min(100%, 37.5rem); } .gdc-lotd-duo__texte-col { flex: 1 1 auto; max-width: none; } .gdc-lotd-duo__rond img { width: min(100%, 37.5rem); /* 600 px au XD */ aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 3px solid var(--gdc-or); margin-inline: auto; } .gdc-lotd-duo__titre .elementor-heading-title { font-size: var(--fs-h3); font-weight: 700; color: var(--gdc-noir); line-height: var(--lh-titre); margin: 0 0 var(--esp-m); } .gdc-lotd-duo__texte ul { margin: 0 0 var(--esp-s); padding-left: 1.15em; } .gdc-lotd-duo__texte li { margin-bottom: var(--esp-xs); } .gdc-lotd-duo__texte p:last-child, .gdc-lotd-duo__texte ul:last-child { margin-bottom: 0; } /* Smile Concept : la bande de 1920x800 du XD. La spec annonce « rect fill=#A07236 » mais l'artboard est crème au pixel (236, 227, 214) — même écart que les bandes à coches. Le crème passe en outre le contraste AA avec le texte noir, ce que l'or du XD ne fait pas (4,44:1). */ .gdc-lotd-duo--creme { background: var(--gdc-creme); } /* Sous 900 px, une seule colonne, et l'image passe toujours devant le texte — y compris sur les blocs inversés, où le DOM la place en second. */ @media (max-width: 900px) { .gdc-lotd-duo > .elementor-container { flex-direction: column; } .gdc-lotd-duo--inverse > .elementor-container { flex-direction: column-reverse; } .gdc-lotd-duo__media { margin-bottom: var(--esp-l); } .gdc-lotd-duo--inverse .gdc-lotd-duo__media { margin: 0 0 var(--esp-l); } } /* ========================================================================== BANDES À COCHES — Endodontie, Implants et prothèses, Orthodontie XD : bandes de 1470 px démarrant à x=250, coche à x=181. La coche déborde donc de 69 px à gauche de la bande. En flux normal elle décalerait toute la grille : elle sort du flux et se superpose au bord de la bande. Le rendu des trois artboards donne des bandes CRÈME très arrondies, pas des rectangles or à angles vifs comme le laisse croire le « fill » de la spec. Hauteur : 199 px sur Endodontie, 249 px sur les deux autres (modificateur `--haute`). Gouttière : 50 px dans les trois cas (défaut B6). ========================================================================== */ .gdc-lotd-etapes { padding: 0 var(--gdc-marge) var(--esp-xl); } .gdc-lotd-etapes__liste { /* la coche déborde à gauche : on lui réserve la place hors de la bande, sinon elle sort du cadre et déclenche un défilement horizontal */ --debord: clamp(1.75rem, 3.6vw, 4.3125rem); --bande-h: clamp(5.5rem, 10.36vw, 12.4375rem); /* 88 → 199 px */ list-style: none; margin: 0 auto; padding: 0 0 0 var(--debord); max-width: calc(1470px + var(--debord)); /* la bande fait bien 1470 px */ } .gdc-lotd-etapes--haute .gdc-lotd-etapes__liste { --bande-h: clamp(6.5rem, 12.97vw, 15.5625rem); /* 104 → 249 px */ } .gdc-lotd-etape { position: relative; display: flex; align-items: center; min-height: var(--bande-h); /* XD : 50 px de gouttière entre deux bandes. --esp-s plafonne à 20 px et comprimait le rythme de 60 % (défaut B6). */ margin-bottom: clamp(0.75rem, 2.6vw, 3.125rem); padding: var(--esp-m) var(--esp-l); background: var(--gdc-creme); border-radius: 999px; } .gdc-lotd-etape:last-child { margin-bottom: 0; } .gdc-lotd-etape__coche { position: absolute; left: 0; top: 50%; translate: -50% -50%; width: clamp(3.5rem, 4.79vw, 5.75rem); /* 56 → 92 px */ height: auto; flex: 0 0 auto; } .gdc-lotd-etape__texte { display: block; padding-left: clamp(1rem, 2.6vw, 3.125rem); } .gdc-lotd-etape__titre { display: block; font-weight: 700; color: var(--gdc-noir); line-height: var(--lh-serre); } .gdc-lotd-etape__detail { display: block; line-height: var(--lh-serre); } /* Sous 700 px la coche ne tient plus à cheval sur le bord : elle passe au-dessus du texte et la bande redevient un simple bloc arrondi. */ @media (max-width: 700px) { .gdc-lotd-etapes__liste { padding-left: 0; } .gdc-lotd-etape { flex-direction: column; align-items: flex-start; min-height: 0; padding: var(--esp-m); border-radius: 1.25rem; } .gdc-lotd-etape__coche { position: static; translate: none; margin-bottom: var(--esp-s); } .gdc-lotd-etape__texte { padding-left: 0; } } /* Le préambule qui précède les bandes ne doit pas laisser un blanc de section entière : le XD ne pose que 187 px entre le chapeau et la première bande. */ .gdc-lotd-avant-bandes { padding-bottom: var(--esp-l); } /* ========================================================================== DEUX COLONNES DE TEXTE XD Implants : x=200 et x=985, donc deux moitiés de la largeur de contenu. XD Smile Concept : deux colonnes de puces au même gabarit. ========================================================================== */ .gdc-lotd-2col { padding: 0 0 var(--esp-xl); } /* Cette section ne porte pas `.gdc-section` : la règle de largeur du haut de fichier ne l'atteint pas, et sa gouttière retombait à 28,8 px à 1440 alors que tout le reste de la page est à 80 px. Même calcul, appliqué ici. Le sélecteur reprend DEUX classes de la section : pages.css pose `.elementor-section.elementor-section-boxed > .elementor-container` à trois classes, et une règle à deux classes perd malgré l'ordre de chargement. */ .gdc-lotd.gdc-lotd-2col > .elementor-container { gap: var(--esp-l); align-items: flex-start; padding-inline: max(0px, min(var(--gdc-marge), 1520px - 100vw)); } .gdc-lotd-2col__col { text-align: left; } .gdc-lotd-2col__col p:last-child { margin-bottom: 0; } /* Le XD colore en or les deux termes de tête des colonnes d'Implants. L'or de la marque ne donne que 4,24:1 contre le blanc : sous 24 px le texte échoue au seuil AA (défaut B3). --gdc-or-fond monte à 4,82:1 et reste indiscernable du doré. */ .gdc-lotd-2col strong { color: var(--gdc-or-fond); } /* Listes d'atouts de Smile Concept : le XD les écrit en gras, puce « • » collée au texte, alignées à gauche dans une section centrée. */ .gdc-lotd-atouts { list-style: none; margin: 0; padding: 0; } .gdc-lotd-atouts li { margin-bottom: var(--esp-s); line-height: var(--lh-serre); } .gdc-lotd-atouts li::before { content: '• '; } .gdc-lotd-atouts li:last-child { margin-bottom: 0; } @media (max-width: 900px) { .gdc-lotd-2col > .elementor-container { flex-direction: column; } } /* ========================================================================== VISUELS NON RONDS — Smile Concept XD : une image de 1280x840 et deux de 1305x514 centrées dans la largeur de contenu, plus un bandeau de 1920x423 en bord à bord. ========================================================================== */ .gdc-lotd-visuel { padding: 0 var(--gdc-marge) var(--esp-xl); } .gdc-lotd.gdc-lotd-visuel > .elementor-container { max-width: 100%; } .gdc-lotd-visuel__img img { width: 100%; max-width: 81.5625rem; /* 1305 px au XD */ margin-inline: auto; } .gdc-lotd-visuel--pleine { padding-inline: 0; } .gdc-lotd-visuel--pleine .gdc-lotd-visuel__img img { max-width: 100%; /* XD : 1920 x 423. Le fichier source ne fait que 1200 px de large ; on conserve le rapport plutôt que d'imposer une hauteur. */ aspect-ratio: 1920 / 423; object-fit: cover; } /* ========================================================================== ÉTAPES NUMÉROTÉES — Smile Concept XD : titre de 40 px centré, texte centré sur toute la largeur de contenu, sans visuel en regard. ========================================================================== */ .gdc-lotd-rdv { padding-block: var(--esp-l); } .gdc-lotd-rdv__titre .elementor-heading-title { font-size: var(--fs-h3); font-weight: 700; color: var(--gdc-noir); margin: 0 0 var(--esp-m); } .gdc-lotd-rdv__texte { max-width: 88ch; margin-inline: auto; } .gdc-lotd-rdv__texte p:last-child { margin-bottom: 0; } /* ========================================================================== AJUSTEMENTS DE TRONC COMMUN, portée lot D seulement ========================================================================== */ /* Chapeau centré sans première ligne en gras : le XD réserve le gras au seul chapeau d'introduction de cinq pages sur huit. */ .gdc-lotd .gdc-chapeau { max-width: 88ch; margin-inline: auto; } .gdc-lotd .gdc-chapeau p:last-child { margin-bottom: 0; } /* Le chapeau et l'introduction portent aussi des listes : elles doivent rester lisibles, donc alignées à gauche dans une section centrée. */ .gdc-lotd .gdc-section--centree .gdc-intro ul, .gdc-lotd .gdc-section--centree .gdc-chapeau ul { display: inline-block; text-align: left; margin: 0 0 var(--esp-s); padding-left: 1.15em; } /* Le texte de conversion touche le bandeau d'accès dans le XD : la bande or fait elle-même la coupure, inutile d'ajouter un blanc avant. */ .gdc-lotd-avant-acces { padding-bottom: var(--esp-l); } /* Titre intercalaire : le duo suivant porte sa propre marge haute. */ .gdc-lotd-titre-inter { padding-bottom: var(--esp-s); } .gdc-lotd-titre-inter .gdc-titre-or .elementor-heading-title { margin-bottom: 0; } /* Dans le XD de ces pages, les passages en gras du corps restent NOIRS : ils marquent le terme, ils ne colorent pas la ligne (vérifié sur les artboards d'Orthodontie, de Blanchiment et de Smile Concept). tokens.css met strong en or ; on le ramène au noir, sauf dans le bloc à deux colonnes ci-dessus, où le XD le veut bien en or. */ .gdc-lotd .gdc-lotd-duo__texte strong, .gdc-lotd .gdc-intro strong, .gdc-lotd .gdc-chapeau strong, .gdc-lotd .gdc-lotd-rdv__texte strong, .gdc-lotd .gdc-faq__r strong { color: var(--gdc-noir); } /* Les liens en or dans le corps de texte échouent au seuil AA sous 24 px (défaut B3) : 4,24:1 contre 4,5 requis. On sert le ton de fond, à 4,82:1. */ .gdc-lotd .gdc-faq__r a, .gdc-lotd .gdc-lotd-duo__texte a, .gdc-lotd .gdc-chapeau a, .gdc-lotd .gdc-intro a { color: var(--gdc-or-fond); text-decoration: underline; } .gdc-lotd .gdc-faq__r a:hover, .gdc-lotd .gdc-lotd-duo__texte a:hover, .gdc-lotd .gdc-chapeau a:hover, .gdc-lotd .gdc-intro a:hover { color: var(--gdc-or-sombre); } /* Le panneau d'horaires du bandeau d'accès : « Nos horaires » passe de 40 à 50 px, un CTA blanc s'ajoute sous la liste, et les jours et les heures sont sur deux colonnes calées plutôt que rejetés aux deux bords. */ .gdc-lotd-acces .gdc-horaires { padding-block: var(--esp-l); } .gdc-lotd-acces .gdc-horaires h3 { font-size: var(--fs-h2); color: var(--gdc-blanc); margin: 0 0 var(--esp-m); } .gdc-lotd-acces .gdc-horaires dl > div { display: grid; grid-template-columns: minmax(0, 9em) 1fr; gap: var(--esp-m); justify-content: start; padding-block: .2em; } .gdc-lotd-acces .gdc-horaires dd { text-align: left; } .gdc-lotd-acces .gdc-horaires .gdc-btn { margin-top: var(--esp-s); } .gdc-lotd-acces .gdc-horaires .gdc-btn img { width: clamp(1.5rem, 2.6vw, 3.125rem); height: auto; } /* La FAQ est alignée à gauche dans une section centrée ; le titre or reste centré, comme au XD. */ .gdc-lotd-faq .gdc-faq { text-align: left; } .gdc-lotd-faq .gdc-faq__r p:last-child, .gdc-lotd-faq .gdc-faq__r ul:last-child { margin-bottom: 0; } .gdc-lotd-faq .gdc-faq__r p { margin-bottom: var(--esp-s); } .gdc-lotd-faq .gdc-faq__r ul { margin: 0 0 var(--esp-s); padding-left: 1.15em; } /* Hello Elementor peint tout button:hover/:focus en #c36 magenta, avec une spécificité qui bat les classes du thème. Les CTA de ce lot sont des liens, pas des