/* ---------------------------------------------------------------------------
   Complement de commun.css pour les sept pages de /controle-technique/.
   Rien n'y est redefini : seulement les blocs propres a ces pages.
--------------------------------------------------------------------------- */
.ouverture{background:var(--gris-clair);padding:52px 0 42px}
.ouverture h1{font-size:29px;margin-bottom:12px;max-width:800px}
.ouverture .chapo{font-size:17px;line-height:1.65;color:var(--gris);max-width:800px;margin:0}

/* le bloc « ou le faire » */
.ou-faire{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-bottom:25px}
.ou-carte{background:var(--gris-clair);border-top:3px solid var(--bleu);padding:18px 20px;
          display:flex;flex-direction:column}
.ou-carte.lourd{border-top-color:var(--rouge-lien)}
.ou-carte h3{margin:0 0 3px;font-size:16px}
.ou-carte h3 a{color:var(--encre)}
.ou-carte h3 a:hover{color:var(--rouge-lien)}
.ou-carte .lieu{font-size:13px;color:var(--gris);margin:0 0 10px;line-height:1.5}
/* l'activite sur sa ligne : l'adresse commence au bord gauche et ne se coupe plus */
.ou-carte .lieu .quoi{display:block;color:var(--encre);font-weight:600;margin-bottom:2px}
.ou-carte .note{font-size:13.5px;margin:0 0 10px;line-height:1.55}
.ou-carte .tel{margin-top:auto;color:var(--bleu);font-weight:700;font-size:18px;text-decoration:none}
.ou-carte .tel:hover{text-decoration:underline}
.ou-carte .mode{display:block;font-size:12.5px;color:var(--gris);margin-top:2px}

/* l'encadre d'orientation : une information qui evite un deplacement */
.repere{border-left:4px solid var(--bleu);background:var(--gris-clair);padding:16px 20px;
        margin-bottom:25px;font-size:14.5px;line-height:1.65}
.repere p{margin:0}
.repere p + p{margin-top:10px}

/* les trois niveaux de defaillance */
.niveaux{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:25px}
.niveau{background:var(--gris-clair);padding:18px 20px;border-top:3px solid #9a9a9a}
.niveau.majeure{border-top-color:#E5A32C}
.niveau.critique{border-top-color:var(--rouge-bouton)}
.niveau h3{margin:0 0 6px;font-size:16px}
.niveau p{margin:0;font-size:14px;color:var(--gris);line-height:1.6}

/* la question de la FAQ est un titre, pour Google, mais elle doit rester sur la
   ligne du marqueur : un h3 en bloc renverrait le texte sous la fleche */
details summary h3{display:inline;font-size:15px;font-weight:600;margin:0;color:var(--encre)}
details summary{list-style-position:outside}

.maj{font-size:13px;color:var(--gris);font-style:italic}

/* les blocs de choix de centre, sur /rendez-vous/ */
.choix-centres{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-bottom:28px}
.choix-carte{background:#fff;border:1px solid #e2e2e2;border-top:3px solid var(--bleu);
             padding:20px 22px;display:flex;flex-direction:column}
.choix-carte.lourd{border-top-color:var(--rouge-lien)}
.choix-carte .entete{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.choix-carte .entete img{height:34px;width:auto;display:block}
.choix-carte .entete b{font-size:16px;font-weight:600;color:var(--encre);line-height:1.25}
.choix-carte .ou{font-size:13px;color:var(--gris);margin:0 0 14px;padding-bottom:14px;
                 border-bottom:1px solid #eee}
.choix-carte .vehicules{display:flex;gap:14px;margin-bottom:16px}
.choix-carte .vehicule{flex:1;text-align:center;font-size:12px;font-weight:600;color:var(--bleu)}
.choix-carte .vehicule svg{display:block;width:34px;height:34px;margin:0 auto 3px;fill:currentColor}
/* grise, et pas seulement pale : un service absent doit se lire d'un coup d'oeil */
.choix-carte .vehicule.off{color:#cfcfcf}
.choix-carte .note-carte{font-size:12.5px;color:var(--gris);line-height:1.5;margin:0 0 14px}
.choix-carte .reserver{margin-top:auto;display:flex;align-items:center;justify-content:center;
                       gap:9px;background:var(--rouge-bouton);color:#fff;font-weight:600;
                       font-size:15px;padding:13px 18px;border-radius:8px;text-decoration:none}
.choix-carte .reserver:hover{background:#c92a22;color:#fff;text-decoration:none}
.choix-carte .reserver svg{width:17px;height:17px;fill:currentColor}
.choix-carte .reserver.telephone{background:var(--bleu);font-size:17px;letter-spacing:.02em}
.choix-carte .reserver.telephone:hover{background:#0a4a85}
.choix-carte{position:relative;overflow:hidden}
.choix-carte.actif{border-color:var(--rouge-bouton);box-shadow:0 0 0 2px rgba(229,53,44,.15);
                   background:#fffaf9}
/* le filigrane occupe le vide entre les pictogrammes et le bouton */
.choix-carte.actif::before{content:'';position:absolute;right:-14px;bottom:56px;
                           width:132px;height:132px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23E5352C'><path d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/></svg>") center/contain no-repeat;
                           opacity:.07;pointer-events:none}
/* la teinte seule ne suffit pas : le rouge ne doit jamais porter une
   information a lui tout seul */
.choix-carte.actif::after{content:'Choisi';position:absolute;top:0;right:0;
                          background:var(--rouge-bouton);color:#fff;font-size:10.5px;
                          font-weight:700;letter-spacing:.06em;text-transform:uppercase;
                          padding:4px 11px 5px;border-bottom-left-radius:7px;
                          pointer-events:none}

/* le blog : liste d'articles, et date en tete d'article */
.date-article{font-size:13px;color:var(--gris);margin:0 0 18px;font-style:italic}
.articles{display:grid;gap:22px}
.article-carte{background:var(--gris-clair);border-left:4px solid var(--bleu);padding:20px 24px}
.article-carte h2{margin:0 0 4px;font-size:19px}
.article-carte h2 a{color:var(--bleu)}
.article-carte .date-article{margin-bottom:10px}
.article-carte p:last-child{margin:0;font-size:14.5px;line-height:1.65}

/* la grille des six prestations, sur le hub */
.prestas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:25px}
.presta-lien{background:#fff;border:1px solid #e2e2e2;padding:18px 20px}
.presta-lien h3{margin:0 0 5px;font-size:16px}
.presta-lien h3 a{color:var(--encre)}
.presta-lien h3 a:hover{color:var(--rouge-lien)}
.presta-lien p{margin:0;font-size:14px;color:var(--gris);line-height:1.6}

@media(max-width:900px){
  .ouverture{padding:36px 0 30px}
  .ouverture h1{font-size:24px}
  .ouverture .chapo{font-size:16px}
  .niveaux,.prestas{grid-template-columns:1fr}
}