/* --------------------------------------------------------------------------- Feuille commune aux maquettes des pages centres. Reprise à l'identique de la maquette CT Damazanais (`../demo-damazan-site/`), elle-même relevée sur le site de 2021 (post-84.css) et sur `scripts/L3-pages-centres/gabarit.py` : bleu #0C589E téléphone, titres, pictogrammes rouge #C51818 liens rouge #E5352C fond des boutons encre #444444 texte courant · Montserrat · interligne 1,7 Largeur de texte 920 px, blocs 1140 px, bloc « Venir » en pleine largeur. ⚠️ Ces maquettes sont jetables. La convergence définitive se fera dans `scripts/L3-pages-centres/gabarit.py`, pas ici. --------------------------------------------------------------------------- */ :root{ --bleu:#0C589E; --rouge-lien:#C51818; --rouge-bouton:#E5352C; --encre:#444444; --gris:#606060; --gris-clair:#F0F0F0; --blanc:#fff; --texte:920px; --large:1140px; } *{box-sizing:border-box} body{margin:0;background:var(--blanc);color:var(--encre); font-family:'Montserrat',Sans-serif;font-size:15px;line-height:1.7;-webkit-font-smoothing:antialiased} .texte{max-width:var(--texte);margin:0 auto;padding:0 20px} .large{max-width:var(--large);margin:0 auto;padding:0 20px} h1,h2,h3{font-family:'Montserrat',Sans-serif;font-weight:600;line-height:1.35;margin:0 0 10px} h1{font-size:27px;color:var(--encre);margin-bottom:4px} h2{font-size:22px;color:var(--bleu)} h3{font-size:17px;color:var(--encre)} p{margin:0 0 25px} a{color:var(--rouge-lien);font-weight:600;text-decoration:none} a:hover{text-decoration:underline} ul{margin:0 0 25px;padding-left:20px} section{padding:55px 0 35px} .bandeau-gris{background:var(--gris-clair)} /* coins arrondis à 8 px : la forme du bouton « Code personnel » du module de réservation, pour que les deux boutons aillent ensemble */ .bouton{display:inline-block;background:var(--rouge-bouton);color:#fff;font-weight:600; font-size:15px;padding:15px 35px;border-radius:8px;text-decoration:none;margin-top:10px} .bouton:hover{background:#c92a22;text-decoration:none;color:#fff} .bouton-bleu{background:var(--bleu)} .bouton-bleu:hover{background:#0a4a85} /* ---- bandeau de maquette ---- */ .demo{background:#222;color:#eee;font-size:12.5px;padding:8px 0;line-height:1.5} .demo b{color:#FF9A93} .demo a{color:#FF9A93} /* ---- barre de navigation ---- */ /* z-index eleve : le panneau du menu doit passer devant le cadre de reservation et devant les plans, qui sont des elements de tiers */ .nav{border-bottom:1px solid #e6e6e6;background:#fff;position:sticky;top:0;z-index:50} .nav .large{display:flex;align-items:center;gap:26px;height:74px;position:relative; min-width:0} .nav .large > *{min-width:0} .nav .logo{height:44px;width:auto;display:block} /* le logo ramene a l'accueil : line-height a zero, sinon le lien ajoute une ligne de blanc sous l'image */ .nav .lien-logo{display:block;line-height:0} /* Un seul onglet, et un bouton. Le menu est un
natif : il s'ouvre au clavier et au doigt, et il fonctionne sans JavaScript — l'ancien menu mobile, lui, disparaissait si le script ne se chargeait pas. */ .nav .menu{position:relative;margin-left:auto} .nav .menu summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px; font-weight:500;font-size:14px;color:var(--encre);padding:6px 0; white-space:nowrap} /* deux libelles dans le balisage, un seul affiche : sur un telephone, la barre ne tient qu au prix des versions courtes. Tronquer au CSS couperait au milieu d un mot. */ .nav .court{display:none} .nav .menu summary::-webkit-details-marker{display:none} .nav .menu summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor; border-bottom:2px solid currentColor;transform:rotate(45deg); margin-top:-3px;transition:transform .15s} .nav .menu[open] summary::after{transform:rotate(-135deg);margin-top:2px} .nav .menu summary:hover{color:var(--rouge-lien)} .nav .menu ul{position:absolute;right:0;top:calc(100% + 16px);min-width:236px;z-index:40; list-style:none;margin:0;padding:8px 0;background:#fff; border:1px solid #e6e6e6;box-shadow:0 8px 22px rgba(0,0,0,.13)} .nav .menu ul a{display:block;padding:10px 22px;font-size:14px;font-weight:500;color:var(--encre)} .nav .menu ul a:hover{background:var(--gris-clair);color:var(--rouge-lien);text-decoration:none} .nav .bouton-rdv{background:var(--rouge-bouton);color:#fff;font-weight:600;font-size:14px; padding:11px 22px;border-radius:8px;text-decoration:none;white-space:nowrap} .nav .bouton-rdv:hover{background:#c92a22;color:#fff;text-decoration:none} /* ---- héros ---- */ .heros{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:430px;background:var(--gris-clair)} .heros .photo{width:100%;height:100%;min-height:430px;object-fit:cover;display:block} /* Aucune photo n'existe encore pour ces quatre centres : le volet garde sa place et le dit, plutôt que de laisser la grille s'effondrer ou d'emprunter une photo qui ne serait pas celle du centre. */ .photo-absente{min-height:430px;display:flex;align-items:center;justify-content:center; text-align:center;padding:30px;background:#dcdcdc;color:#6b6b6b;font-size:14px;line-height:1.6} .photo-absente span{max-width:280px} .heros .panneau{background:#fff;padding:42px 46px;display:flex;flex-direction:column;justify-content:center} .heros .tel{color:var(--bleu);font-weight:700;font-size:23px;margin:0 0 14px} .heros .tel a{color:inherit;text-decoration:none} .heros .tel a:hover{text-decoration:underline} .heros .reperes{margin:0 0 6px;font-size:16px;color:#333;line-height:1.65} .heros .reperes strong{color:var(--bleu)} .heros .reperes.seul{margin-bottom:18px} .heros .reperes a{color:inherit;text-decoration:none} .heros .reperes a:hover{text-decoration:underline} .heros .reperes .lire-avis{color:var(--rouge-lien);font-weight:600} .heros .reperes-note{margin:0 0 18px;font-size:13px;color:#6b6b6b;line-height:1.5} .heros p.intro{margin-bottom:22px} .pictos{display:flex;flex-wrap:wrap;gap:18px;margin-bottom:6px} .picto{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.5;max-width:175px} .picto .rond{flex:0 0 34px;height:34px;border-radius:50%;display:flex;align-items:center; justify-content:center;color:#fff} .picto .rond svg{display:block;width:18px;height:18px;fill:currentColor} .picto .rond.b{background:var(--bleu)} .picto .rond.r{background:var(--rouge-bouton)} .picto b{display:block;font-weight:600;color:var(--encre)} /* ---- fil d'ariane ---- */ .ariane{font-size:13px;padding:16px 0 0} .ariane span{color:#7A7066;font-weight:400} /* ---- prestations ---- */ .prestations{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:25px} .prestations.trois-cartes{grid-template-columns:repeat(3,minmax(0,1fr))} .presta{background:var(--gris-clair);border-top:3px solid var(--bleu);padding:18px 20px} .presta.lourd{border-top-color:var(--rouge-lien)} .presta h3{margin:0 0 6px;font-size:16px} .presta p{margin:0;font-size:14px;color:var(--gris);line-height:1.6} /* ---- réservation ---- */ .cadre{border:1px solid #e2e2e2;background:#fff} .cadre .titre{background:var(--bleu);color:#fff;font-weight:600;padding:13px 22px;font-size:15px; display:flex;flex-wrap:wrap;gap:10px;align-items:center} .cadre .titre span{margin-left:auto;font-weight:400;font-size:13px;opacity:.9} /* Hauteurs relevées le 02/09/2026 sur la page du prestataire, à 880 px de large : choix de la prestation 591 px pour un catalogue de 5 prestations, calendrier 1016 px en grand écran et 1320 px en colonne. */ #mct-reservation{width:100%;border:0;display:block;height:600px;transition:height .2s} #mct-reservation.etape-suite{height:1040px} .cadre .pied{border-top:1px solid #e2e2e2;background:var(--gris-clair);padding:14px 22px;font-size:14.5px} .cadre .pied p{margin:0} .redirection-mct{padding:22px;text-align:center} .redirection-mct p{margin:0 0 16px} .redirection-mct .bouton{margin-top:0} /* Rendez-vous par téléphone : pour les deux centres poids lourd, dont aucune prestation n'est réservable en ligne chez le prestataire. */ .rdv-tel{border:1px solid #e2e2e2;background:#fff} .rdv-tel .corps{padding:26px 30px} .rdv-tel .numero{display:block;color:var(--bleu);font-weight:700;font-size:30px;line-height:1.2; margin:0 0 6px;text-decoration:none} .rdv-tel .numero:hover{text-decoration:none;color:#0a4a85} .rdv-tel .quand{color:var(--gris);font-size:14px;margin:0 0 20px} .rdv-tel ul{margin:0;font-size:14.5px} .rdv-tel li{margin-bottom:6px} /* ---- horaires ---- */ table.horaires{width:100%;border-collapse:collapse;font-size:15px;margin-bottom:25px} table.horaires td{padding:10px 0;border-bottom:1px solid #eee} table.horaires td:last-child{text-align:right} table.horaires tr:last-child td{border-bottom:0} .ferme{color:#9a9a9a} .titre-horaires{margin:0 0 8px} #acces table.horaires{font-size:14px;margin-bottom:0} #acces table.horaires td{padding:8px 0;border-bottom-color:#e0e0e0} /* ---- bloc « Venir », pleine largeur sur trois colonnes ---- */ .pleine{max-width:none;margin:0;padding:0 30px} .trois{display:grid;grid-template-columns:1fr 1.25fr .85fr;gap:34px;align-items:start} /* Le plan porte notre propre repère : un cadre Google intégré n'accepte ni icône ni infobulle personnalisées sans clé d'API. `ll=` centre la carte sans y poser le repère de Google, le nôtre est dessiné par-dessus, et une couche transparente neutralise le déplacement — sinon le repère désignerait le mauvais endroit dès que la carte glisse. Le clic ouvre l'itinéraire. */ .plan-cadre{position:relative;border:1px solid #dcdcdc;background:#e8e8e8} .plan{width:100%;height:430px;border:0;display:block;object-fit:cover;background:#e8e8e8} .plan-lien{position:absolute;inset:0;display:block;text-decoration:none} .plan-credit{position:absolute;right:0;bottom:0;z-index:2;background:rgba(255,255,255,.85);font-size:11px;padding:2px 6px;color:#333} .plan-credit a{color:#333} .plan-repere{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)} .plan-repere .rond{display:flex;width:38px;height:38px;border-radius:50%;background:var(--rouge-bouton); align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.35)} .plan-repere .rond svg{display:block;width:20px;height:20px;fill:#fff} .bulle{position:absolute;left:50%;bottom:calc(100% + 11px);transform:translateX(-50%); min-width:215px;background:#fff;color:var(--encre);border-radius:6px;padding:11px 15px; font-size:13px;line-height:1.5;text-align:left;box-shadow:0 3px 12px rgba(0,0,0,.25); opacity:0;visibility:hidden;transition:opacity .15s;pointer-events:none} .bulle b{display:block;color:var(--bleu);font-size:14px;margin-bottom:3px} .bulle .tel-bulle{display:block;color:var(--bleu);font-weight:700;margin-top:3px} .bulle::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%); border:7px solid transparent;border-top-color:#fff} .plan-repere:hover .bulle,.plan-lien:focus-visible .bulle{opacity:1;visibility:visible} .lien-plan{display:inline-block;margin-top:10px;font-size:14px} .hors-ecran{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* ---- FAQ ---- */ details{border-bottom:1px solid #eee;padding:14px 0} details summary{font-weight:600;cursor:pointer;color:var(--encre);font-size:15px} details p{margin:10px 0 0;color:var(--gris)} /* ---- pied de page ---- */ footer.site{background:var(--gris-clair);margin-top:20px;padding:26px 0;font-size:13px;color:var(--gris);text-align:center} @media(max-width:900px){ .heros{grid-template-columns:1fr} .heros .photo,.photo-absente{min-height:220px;order:-1} .heros .panneau{padding:30px 24px} .trois{grid-template-columns:1fr;gap:26px} .prestations,.prestations.trois-cartes{grid-template-columns:1fr 1fr} .pleine{padding:0 20px} .plan{height:300px} .nav .large{gap:12px} .nav .logo{height:34px} /* le panneau prend la largeur de la barre, pas celle du mot « Infos » : a 110 px les entrees se coupaient en deux lignes et se chevauchaient */ .nav .menu{position:static} .nav .menu ul{left:0;right:0;top:100%;min-width:0;width:auto; box-shadow:0 12px 24px rgba(0,0,0,.18)} .nav .menu ul a{padding:13px 22px;font-size:15px} .nav .bouton-rdv{padding:10px 15px;font-size:13.5px} .nav .logo{height:30px} .nav .long{display:none} .nav .court{display:inline} .nav .large{gap:10px} #mct-reservation.etape-suite{height:1360px} } @media(max-width:560px){ .prestations,.prestations.trois-cartes{grid-template-columns:1fr} } /* ---- consentement aux contenus extérieurs --------------------------------- Deux tiers seulement : les plans Google et le module de réservation. Le voile prend la place du cadre tant que rien n'est accordé — il n'est pas posé par-dessus un contenu déjà chargé, il le remplace. */ /* Le voile met la page en arrière-plan tant qu'on n'a pas répondu (demande de Vincent, 10/09/2026). Il est SOUS le bandeau et intercepte les clics : on ne navigue pas avant d'avoir choisi. Il ne se ferme pas au clic — un clic à côté n'est pas une réponse. Le fondu est court : un voile qui apparaît brutalement se lit comme une panne. */ .consentement-fond{position:fixed;inset:0;z-index:99;background:rgba(16,26,38,.62); animation:consentement-apparait .18s ease-out} @keyframes consentement-apparait{from{opacity:0}to{opacity:1}} @media(prefers-reduced-motion:reduce){.consentement-fond{animation:none}} .consentement{position:fixed;left:0;right:0;bottom:0;z-index:100;background:#fff; border-top:3px solid var(--rouge-bouton);box-shadow:0 -6px 26px rgba(0,0,0,.16)} /* Sortie de secours pour qui rouvre le bandeau volontairement. Discrète mais pas cachée — et absente à l'arrivée sur le site, où les deux vrais choix sont seuls. */ .consentement-annuler{background:none;border:0;padding:6px 4px;cursor:pointer; font-family:inherit;font-size:13px;color:var(--gris); text-decoration:underline} .consentement-annuler:hover{color:var(--encre)} .consentement .large{display:flex;gap:32px;align-items:center;padding-top:20px;padding-bottom:20px} .consentement-titre{font-weight:700;color:var(--encre);margin:0 0 8px;font-size:16px} .consentement ul{margin:0 0 10px;padding-left:20px;font-size:14px;line-height:1.55} .consentement li{margin-bottom:3px} .consentement-note{font-size:13px;color:var(--gris);margin:0;line-height:1.55} .consentement-boutons{display:flex;flex-direction:column;gap:10px;flex:0 0 auto} /* refuser doit être aussi simple qu'accepter : même taille, même place */ .consentement-boutons .bouton{margin-top:0;text-align:center;white-space:nowrap; padding:13px 28px;border:0;cursor:pointer; font-family:inherit;font-size:15px} .bouton-refus{background:var(--bleu)} .bouton-refus:hover{background:#0a4a85} .tiers-voile{display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;padding:36px 26px;background:var(--gris-clair);min-height:300px} .tiers-titre{font-weight:700;color:var(--encre);margin:0 0 6px;font-size:16px} .tiers-quoi{font-size:14px;color:var(--gris);max-width:460px;margin:0 0 18px;line-height:1.6} .tiers-voile .bouton{margin-top:0;border:0;cursor:pointer;font-family:inherit;font-size:15px} .tiers-noscript{font-size:14px;color:var(--gris);padding:24px;background:var(--gris-clair); margin:0;line-height:1.6} @media(max-width:760px){ .consentement .large{flex-direction:column;align-items:stretch;gap:16px} .consentement-boutons{flex-direction:row} .consentement-boutons .bouton{flex:1;padding:13px 10px} .tiers-voile{min-height:230px;padding:28px 18px} } /* --------------------------------------------------------------------------- Tableau de périodicité des pages poids lourd (11/09/2026) Même ossature que le tableau « qui fait quoi » de /centres/, mais servi ici par la feuille commune, les deux pages poids lourd en ayant besoin. 🔑 `position:relative` sur l'enveloppe n'est PAS décoratif : sans elle, la largeur du tableau remonte jusqu'au document et toute la page glisse latéralement sur mobile, alors même que l'enveloppe défile correctement. Mesuré le 07/09 sur /centres/, où le même piège avait coûté 294 px. --------------------------------------------------------------------------- */ .enveloppe-tableau{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 22px; position:relative} table.periodicite{border-collapse:collapse;width:100%;min-width:560px;font-size:14.5px; line-height:1.5;background:#fff} table.periodicite thead th{background:var(--bleu);color:#fff;font-weight:600;font-size:13.5px; text-align:left;padding:10px 14px;vertical-align:bottom} table.periodicite tbody th{font-weight:600;color:var(--encre);text-align:left; padding:11px 14px;border-bottom:1px solid #e6e6e6; background:#fafafa;max-width:260px} table.periodicite tbody td{padding:11px 14px;border-bottom:1px solid #e6e6e6;color:var(--gris)} table.periodicite tbody tr:last-child th, table.periodicite tbody tr:last-child td{border-bottom:0} table.periodicite .rythme{font-weight:700;color:var(--bleu);white-space:nowrap} /* l indication de glissement ne sert que sur mobile : masquee par defaut, elle est rallumee dans la requete de media ci-dessous */ .glisser{display:none;font-size:13px;color:var(--gris);margin:0 0 10px;font-style:italic} @media(max-width:760px){ .glisser{display:block} table.periodicite{min-width:520px} table.periodicite thead th,table.periodicite tbody th,table.periodicite tbody td{padding:9px 11px} } /* --------------------------------------------------------------------------- Calcul du poids à charger — page poids lourd commune (11/09/2026) Deux colonnes : les réglages à gauche, le résultat dans un panneau encadré à droite. Sur mobile, le panneau passe SOUS les réglages — il doit rester visible pendant qu'on tire les curseurs, d'où la position collante. --------------------------------------------------------------------------- */ .calculateur{display:grid;grid-template-columns:1fr minmax(280px,360px);gap:34px; align-items:start;margin:26px 0 24px} .reglage{margin-bottom:26px} .reglage:last-child{margin-bottom:0} .ligne-reglage{display:flex;align-items:center;justify-content:space-between;gap:16px; margin-bottom:10px} .ligne-reglage label{font-weight:600;color:var(--encre);font-size:15px} .ligne-reglage .valeur{display:inline-flex;align-items:center;gap:6px;background:#fff; border:1px solid #d8d8d8;border-radius:8px;padding:7px 12px} .ligne-reglage input[type=number]{width:84px;border:0;padding:0;text-align:right; font-family:inherit;font-size:16px;font-weight:700; color:var(--bleu);background:transparent; -moz-appearance:textfield} .ligne-reglage input[type=number]::-webkit-outer-spin-button, .ligne-reglage input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .ligne-reglage .unite{color:var(--gris);font-size:14px} /* le curseur : piste grise, partie parcourue rouge, poignée cerclée */ .reglage input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px; border-radius:999px;background:#dcdcdc;outline:none} .reglage input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none; width:26px;height:26px;border-radius:50%;background:#fff;cursor:pointer; border:3px solid var(--rouge-bouton);box-shadow:0 1px 4px rgba(0,0,0,.18)} .reglage input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%; background:#fff;cursor:pointer;border:3px solid var(--rouge-bouton)} .reglage input[type=range]:focus-visible{outline:3px solid var(--bleu);outline-offset:4px} .resultat{border:2px solid var(--rouge-bouton);border-radius:16px;background:#fff; padding:26px 24px;text-align:center;position:sticky;top:16px} .resultat-titre{font-weight:600;color:var(--encre);margin:0 0 6px;font-size:16px} .resultat-chiffre{font-size:clamp(30px,4vw,42px);font-weight:700;color:var(--rouge-bouton); line-height:1.1;margin:0 0 18px} /* Ces trois lignes expliquent le chiffre : elles se lisent, elles ne se devinent pas. Relevees de 14 a 15,5 px et le libelle assombri. */ .resultat-detail{margin:0 0 16px;padding:0;font-size:15.5px;text-align:left} .resultat-detail>div{display:flex;justify-content:space-between;gap:12px; padding:11px 0;border-top:1px solid #e6e6e6} .resultat-detail dt{color:var(--encre);margin:0;line-height:1.4} .resultat-detail dd{margin:0;font-weight:700;color:var(--encre);white-space:nowrap} .resultat-note{font-size:14.5px;color:var(--gris);line-height:1.55;margin:0 0 18px;text-align:left} /* Le second chiffre : ce que le vehicule doit peser une fois charge. Il etait noye en premiere ligne du detail, entre deux rappels de saisie. En bleu — deux rouges se seraient disputes le regard — et un cran sous le principal, pour garder la hierarchie : l'action d'abord, le seuil a atteindre ensuite. */ .resultat-second{margin:0 0 16px;padding:14px 16px;border-radius:12px; background:var(--gris-clair);text-align:center} .second-titre{margin:0 0 3px;font-size:14px;font-weight:600;color:var(--gris);line-height:1.4} .second-chiffre{margin:0;font-size:clamp(24px,3.2vw,32px);font-weight:700;color:var(--bleu); line-height:1.15} .second-detail{margin:4px 0 0;font-size:13px;color:var(--gris);line-height:1.45} .resultat .bouton{margin-top:0;display:block} @media(max-width:760px){ .calculateur{grid-template-columns:1fr;gap:24px} .resultat{position:static;padding:22px 18px} .ligne-reglage{flex-wrap:wrap;gap:8px} } /* --------------------------------------------------------------------------- Les deux outils de la charge, sous « Prendre rendez-vous » (11/09/2026) Ils vivaient en bas de page, a 52 % du defilement, dans un seul renvoi sans style — le texte se collait au bouton. C'est en preparant son appel qu'un transporteur en a besoin : chacun a desormais son bloc et son bouton. --------------------------------------------------------------------------- */ /* La carte du numero a gauche, les deux outils a droite : on voit d'un seul regard le moyen d'appeler et ce qu'il faut savoir avant d'appeler. La carte prend un peu plus de place — elle porte une liste a puces. */ .rdv-colonnes{display:grid;grid-template-columns:1.08fr 1fr;gap:24px;align-items:stretch; margin-top:22px} .rdv-colonnes .outils-rdv{margin-top:0} /* la carte du numero est la plus courte des deux : elle s'etire a la hauteur de sa voisine, et son contenu se centre dans la place gagnee. Sans cela elle s'arretait 113 px plus haut et le blanc sous elle se voyait. */ .rdv-colonnes .rdv-tel{display:flex;flex-direction:column} .rdv-colonnes .rdv-tel .corps{flex:1;display:flex;flex-direction:column;justify-content:center} /* dans une colonne, les deux outils s'empilent : c'est une liste d'actions */ .rdv-colonnes .outils-grille{grid-template-columns:1fr;gap:14px} .outils-rdv{margin:26px 0 0} .outils-titre{margin:0 0 14px;font-weight:700;font-size:16px;color:var(--encre)} .outils-grille{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch} .outils-grille .outil{display:flex;flex-direction:column;background:#fff; border:1px solid #e3e3e3;border-radius:14px;padding:20px 22px} .outils-grille .outil h3{margin:0 0 8px;font-size:16.5px;color:var(--bleu);line-height:1.35} .outils-grille .outil p{margin:0 0 18px;font-size:14.5px;line-height:1.6;color:var(--gris)} /* le bouton se colle en bas : les deux cartes n'ont pas le meme volume de texte, et deux boutons decales a 4 px l'un de l'autre se voient */ .outils-grille .outil .bouton{margin-top:auto;align-self:flex-start;padding:13px 24px; font-size:14.5px} /* Sous 900 px, les deux colonnes se suivent : cote a cote, la carte du numero descendrait sous 400 px et son numero de telephone passerait a la ligne. */ @media(max-width:900px){ .rdv-colonnes{grid-template-columns:1fr;gap:20px} } @media(max-width:760px){ .outils-grille{grid-template-columns:1fr;gap:14px} .outils-grille .outil .bouton{align-self:stretch;text-align:center} } /* --------------------------------------------------------------------------- Les appels aux deux lignes poids lourd — sous le résultat du calcul ET sous le verdict de contre-visite. Le nom du centre sur une ligne, le numéro dessous : sans « display:block » sur le span, les deux se collaient et la page affichait « Agen Auto CT, ligne poids lourd05 53 96 64 96 ». --------------------------------------------------------------------------- */ .appels-centres{display:grid;gap:10px} .appels-centres .bouton{display:block;margin-top:0;padding:12px 18px;text-align:center; font-size:14px;line-height:1.35} .appels-centres .bouton span{display:block;margin-top:4px;font-size:19px;font-weight:700; white-space:nowrap} /* Le même bloc, quand il suit le verdict de contre-visite : il est alors seul au milieu du texte, il lui faut son propre cadre et son intitulé. */ .appels-verdict{margin:22px 0 0;padding:18px 20px;background:#fff; border:1px solid #e6e6e6;border-radius:14px;max-width:430px} .appels-verdict .appels-titre{margin:0 0 12px;font-size:14.5px;font-weight:600; color:var(--encre);line-height:1.5} .ou-trouver{margin:26px 0 0;padding:14px 16px;background:#fff;border-left:3px solid var(--bleu); font-size:14px;color:var(--gris);line-height:1.6} /* le repère de carte grise, collé au libellé du réglage. ⚠️ NE PAS l'appeler « repere » : ce nom porte déjà l'encadré des repères d'accès, déclaré plus bas dans ce fichier et présent sur 7 pages. À nom égal c'est la dernière règle qui gagne : la pastille F.2 s'affichait en gros bloc gris à filet bleu, texte débordant, et poussait le libellé sur trois lignes. */ .repere-cg{display:inline-block;margin-left:6px;padding:2px 7px;border-radius:999px; background:var(--bleu);color:#fff;font-size:11.5px;font-weight:700; letter-spacing:.02em;vertical-align:2px} /* --------------------------------------------------------------------------- « Dois-je revenir en charge ? » — lecture du procès-verbal (11/09/2026) Deux voies côte à côte : la photo et la sélection. Aucune n'est secondaire — une photo ratée dans un atelier sombre est la norme, pas l'exception. --------------------------------------------------------------------------- */ /* align-items:start, sinon le panneau de gauche — deux fois plus court — est étiré à la hauteur de celui de droite et laisse un grand vide blanc. */ .deux-voies{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin:24px 0 8px; align-items:start} .voie{background:#fff;border:1px solid #e2e2e2;border-radius:14px;padding:22px 22px 18px} .voie h3{margin:0 0 14px;font-size:16px;color:var(--bleu)} .voie .bouton{margin-top:0} /* Le champ de fichier natif est laid et intraduisible : on le masque sans le retirer du parcours clavier, et c'est le