/* ==========================================================================
   Autoguru — complement Create My Website
   Ce fichier n'existe pas dans le theme achete. Il ajoute ce qui manque pour
   un site CMW et corrige ce que le theme fait de faux en francais.
   Tout est branche sur les variables du theme (--accent-color, --primary-color…)
   pour que la personnalisation du site reste prioritaire.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Typographie francaise
   Le theme applique `text-transform: capitalize` aux boutons, au menu et aux
   listes de liens. En anglais c'est la norme, en francais cela produit
   « Demander Un Rendez-Vous » et « L'auto-École ». On neutralise.
   -------------------------------------------------------------------------- */
.btn-default,
.readmore-btn,
.main-menu ul li a,
.slicknav_nav .slicknav_row,
.slicknav_nav li a,
.section-footer-text p a,
.footer-links ul li,
.footer-links-stone ul li,
.footer-links-metal ul li,
.page-category-list ul li,
.tag-links,
.post-tags .tag-links a,
.page-header-box ol li.breadcrumb-item,
.skills-progress-bar .skill-data .skill-title,
.skills-progress-bar .skill-data .skill-no {
    text-transform: none;
}

/* --------------------------------------------------------------------------
   1 bis. Logo : le theme n'impose AUCUNE taille a `.navbar-brand img`
   Son logo de demo est un SVG de ~150 px de large, alors les clients televersent
   un PNG de 600 px ou plus : sans contrainte, le logo mange la moitie de l'en-tete
   et pousse le menu hors ecran (constate le 23/08/2026 sur autoecole-letrefle).
   On borne la HAUTEUR et on laisse la largeur suivre.
   -------------------------------------------------------------------------- */
.navbar-brand img {
    max-height: 52px;
    width: auto;
    max-width: 260px;
    object-fit: contain;
}

.footer-logo-stone img,
.footer-logo img,
.footer-logo-metal img {
    max-height: 64px;
    width: auto;
    max-width: 240px;
    object-fit: contain;
}

/* Marque rendue par partials/brand.blade.php : image seule, favicon + nom, ou nom seul
   (mode « Logo hybride » choisi dans « Personnaliser »). Les tailles ci-dessous ne
   s'appliquent qu'aux modes texte : le mode image est deja borne plus haut. */
.autoguru-brand-inner {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.autoguru-brand-text {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
    color: var(--white-color);
}

/* En-tete pose sur une photo sombre -> texte blanc. Une fois colle en haut, le fond
   passe en clair : le texte doit repasser en encre, sinon il devient invisible. */
.header-sticky.active .autoguru-brand-text,
.header-sticky.sticky .autoguru-brand-text {
    color: var(--primary-color);
}

.autoguru-footer-brand {
    display: inline-block;
    text-decoration: none;
}

.autoguru-footer-brand .autoguru-brand-text {
    color: var(--white-color);
}

@media (max-width: 767px) {
    .autoguru-brand-text { font-size: 19px; }
}

@media (max-width: 767px) {
    .navbar-brand img { max-height: 42px; max-width: 190px; }
}

/* --------------------------------------------------------------------------
   2. Deux reglages que le theme ne prevoit pas, exposes dans « Personnaliser »

   --btn-label-color : le theme pose le libelle en --primary-color (encre) sur un
   fond --accent-color. Ca marche avec SON accent d'origine, un jaune tres pale.
   Des qu'un client choisit un accent sature — c'est le cas de tous les notres —
   l'encre sur la couleur devient illisible et il faut du blanc. Aucun calcul de
   contraste n'est possible en CSS : c'est donc un token que le client regle
   (« Libelle des boutons »), avec repli sur l'encre comme dans le theme d'origine.

   --rating-color : le theme peint les etoiles en --accent-color. Une marque a
   souvent une 2e couleur pour ca (le jaune du trefle, par exemple) et des etoiles
   vertes ne se lisent pas comme des etoiles. Token dedie, repli sur l'accent.
   -------------------------------------------------------------------------- */
:root {
    --btn-label-color: var(--primary-color);
    --rating-color: var(--accent-color);
}

.btn-default {
    color: var(--btn-label-color);
}

/* Le survol du bouton fait glisser un fond --primary-color : le libelle repasse
   en blanc, c'est la regle du theme, on la conserve telle quelle. */
.btn-default:hover {
    color: var(--white-color);
}

/* Etoiles et notes. Selecteurs repris du theme + un filet sur les icones
   Font Awesome d'etoile, que plusieurs blocs posent sans classe dediee. */
.hero-rating-header p i,
.hero-rating-header-stone p i,
.why-choose-rating-header i,
.testimonial-rating-stone ul li i,
.testimonial-item-rating-metal ul li i,
.section-footer-text ul li i,
i.fa-star,
i.fa-star-half-stroke,
i.fa-star-half-alt {
    color: var(--rating-color);
}

/* --------------------------------------------------------------------------
   2 bis. Voiles sombres : suivre l'encre du site, pas le gris du theme
   custom.css code `rgba(34, 34, 34, …)` EN DUR dans six degrades. Resultat : un
   site dont l'encre est vert-noir garde des voiles gris souris, et le heros ne
   raccorde pas avec le reste de la page. On rejoue les memes degrades, aux memes
   pourcentages, mais teintes avec --primary-color.
   -------------------------------------------------------------------------- */
.hero-stone:before {
    background:
        linear-gradient(0deg, transparent 72.41%, color-mix(in srgb, var(--primary-color) 80%, transparent) 93.62%),
        linear-gradient(180deg, transparent 25.62%, color-mix(in srgb, var(--primary-color) 90%, transparent) 76.23%);
}

/* ⚠️ Sous 1024 px, custom.css remplace ces degrades par un VOILE PLAT a 70 %
   (`.hero-stone:before { background: var(--primary-color); opacity: 70% }`), parce que
   sur un ecran etroit le contenu occupe toute la hauteur : entre 25 % et 72 %, les
   degrades ci-dessus sont transparents, et le paragraphe comme la liste d'arguments se
   retrouvent en blanc sur une image claire. Ma regle non conditionnee ecrasait ce
   repli — mesure sur iPhone 390 px, video de fond active : texte illisible sur les
   plans clairs. On rejoue donc le voile plat du theme, teinte a l'encre du site. */
@media only screen and (max-width: 1024px) {
    .hero-stone:before {
        background: var(--primary-color);
        opacity: 0.7;
    }
}

.book-appointment-stone::before {
    background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--primary-color) 80%, transparent) 100%);
}

.course-item-image-stone figure:before,
.benefit-item-image-stone figure:before {
    background: linear-gradient(180deg, transparent 35.7%, color-mix(in srgb, var(--primary-color) 80%, transparent) 87.14%);
}

.advance-driving-lessons-stone figure:before {
    background: linear-gradient(180deg, transparent 50%, color-mix(in srgb, var(--primary-color) 80%, transparent) 108.72%);
}

/* --------------------------------------------------------------------------
   2 ter. Pastille chiffree sans vignettes
   Le theme reserve 125 px aux trois portraits (`width: calc(100% - 125px)` sur le
   texte). Quand le site n'en fournit aucun — le cas par defaut, on ne veut pas
   afficher les inconnus du gabarit — le texte resterait comprime a droite d'un
   vide. Seul enfant = pleine largeur.
   -------------------------------------------------------------------------- */
.happy-customer-box-stone .happy-customer-content-stone:only-child {
    width: 100%;
}

/* --------------------------------------------------------------------------
   2 quater. SITE PLEINE LARGEUR
   Le theme achete presente ses sections comme des CARTES : `.bg-section` est
   bornee a 1880 px, centree, avec 10 px de coins arrondis, et 20 px d'air de
   chaque cote entre 1540 et 1880 px. Sur un grand ecran, le site flotte donc au
   milieu d'une bande blanche.
   On passe en pleine largeur : plus de `max-width`, plus d'arrondi, plus de marge.
   Le theme le fait deja lui-meme sous 1540 px — on ne fait qu'etendre ce
   comportement a toutes les tailles.

   ⚠️ Ce fichier est charge APRES custom.css : une regle de meme specificite gagne
   par l'ordre source, y compris contre celles posees dans les media queries du
   theme (une media query ne change pas la specificite).
   -------------------------------------------------------------------------- */
.bg-section {
    width: 100%;
    max-width: none;
    border-radius: 0;
    margin: 0;
}

/* Sans les marges de la carte, un conteneur fluide a 0 collerait le texte au bord
   de l'ecran. On reprend la valeur que le theme utilise deja en petit ecran.
   (`.how-it-works.bg-section .container-fluid` reste a 0 : plus specifique.) */
.bg-section .container-fluid {
    padding: 0 15px;
}

/* Le liseré blanc au-dessus du heros n'a plus de sens une fois la carte supprimee. */
.hero,
.hero-stone,
.hero-metal {
    margin-top: 0;
}

/* --------------------------------------------------------------------------
   2 quinquies. VIDÉO DE FOND DU HÉROS

   Une iframe YouTube a un format FIXE (16/9) : posée en 100 % × 100 % elle se
   déforme, et en `object-fit` elle ne réagit pas — ce n'est pas une image.
   On la dimensionne donc à la main pour qu'elle COUVRE le bandeau, quelle que
   soit sa forme : on prend le plus grand des deux calculs (largeur imposée par
   la hauteur, ou hauteur imposée par la largeur) et on recentre.

   Empilement dans `.hero-stone` : vidéo 0 · voile `:before` 1 · contenu 2.
   La photo de fond reste sous la vidéo — image d'attente, et seul fond visible
   si l'iframe ne charge pas.
   -------------------------------------------------------------------------- */
.autoguru-hero-video {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none; /* la vidéo ne doit jamais voler le clic aux boutons */

    /* Masquée tant que la lecture n'a pas commencé : une iframe YouTube est opaque
       dès qu'elle est posée, et afficherait un rectangle noir à la place du bandeau
       pendant tout le chargement — définitivement si la lecture automatique est
       refusée. Le script du composant retire ce masque à l'état « en lecture ». */
    opacity: 0;
    transition: opacity .8s ease;
}

.autoguru-hero-video.is-ready {
    opacity: 1;
}

.autoguru-hero-video iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 56.25vw;          /* 100 / (16/9) : hauteur imposée par la largeur */
    min-width: 177.78vh;      /* (16/9) * 100 : largeur imposée par la hauteur */
    min-height: 100vh;
    border: 0;
}

/* MOBILE — la vidéo tourne aussi.

   Elle était coupée sous 768 px « pour économiser les données ». Mauvais arbitrage :
   le bandeau d'accueil est ce que la moitié des visiteurs voient en premier, et sur
   téléphone il ne montrait qu'une photo figée.

   Le dimensionnement plus haut couvre déjà le portrait : `min-width: 177.78vh` impose
   la largeur depuis la hauteur, l'iframe déborde latéralement et `overflow: hidden`
   la recadre. Rien à changer.

   Deux garde-fous restent :
   - `mute=1` + `playsinline=1` (poses par le composant) : sans eux, AUCUN mobile ne
     demarre une lecture automatique, et iOS sortirait la video en plein ecran ;
   - la video n'est devoilee que lorsqu'elle joue VRAIMENT. Si le telephone refuse la
     lecture (mode economie d'energie d'iOS, onglet en arriere-plan), la photo reste
     seule visible : c'est le bon repli, pas un accident.

   Reste le cout en donnees : on respecte le visiteur qui a demande a l'economiser. */
@media (prefers-reduced-data: reduce) {
    .autoguru-hero-video { display: none; }
}

/* Et le reglage du composant, pour un client qui prefere la photo sur telephone. */
@media (max-width: 767px) {
    .autoguru-hero-video.autoguru-hero-video--sans-mobile { display: none; }
}

/* --------------------------------------------------------------------------
   3. Fonds en parallaxe — NEUTRALISES A TOUTES LES TAILLES

   `parallaxie.js` relit l'image de fond au chargement puis repose, en style INLINE,
   un `background-attachment: fixed` et un `background-position` vertical calcule
   depuis la position du bloc dans la page. Sur nos pages, plus longues que la demo
   du theme, ce calcul donne des valeurs aberrantes : mesure le 23/08/2026 sur la
   section « Prenez rendez-vous », `background-position: 50% 3869px` — la photo etait
   poussee a pres de 4 000 px sous le bloc, donc parfaitement invisible. Le visiteur
   voyait un aplat vert et rien d'autre.

   On neutralise donc le script partout, pas seulement sur mobile (ou `fixed` n'est
   de toute facon pas supporte par iOS).

   ⚠️ La POSITION passe par une variable, pas par une valeur figee : `!important` est
   indispensable pour battre le style inline de parallaxie.js, mais il ecraserait du
   meme coup le cadrage choisi par le client. Un composant qui veut imposer son
   cadrage pose donc `--autoguru-bg-pos` en inline — une propriete personnalisee que
   parallaxie.js ne touche pas.
   -------------------------------------------------------------------------- */
.parallaxie {
    background-attachment: scroll !important;
    background-repeat: no-repeat !important;
    background-position: var(--autoguru-bg-pos, center center) !important;
}

/* `cover` UNIQUEMENT quand l'image vient de nous (style inline).
   Plusieurs sections « parallaxie » du gabarit n'ont pas de photo de client : leur fond
   est un decor pose par custom.css avec son propre cadrage — `.our-pricing-metal` par
   exemple est en `background-size: 100% auto`. Forcer `cover` partout etirait ces
   decors. */
.parallaxie[style*="background-image"] {
    background-size: cover !important;
}

/* --------------------------------------------------------------------------
   4. Bloc « contenu » — mise en forme redactionnelle
   Le theme achete n'a ni page legale ni zone de texte libre : aucune regle
   pour un corps d'article redige. On la fabrique ici.
   -------------------------------------------------------------------------- */
.autoguru-prose {
    color: var(--text-color);
    font-size: 16px;
    line-height: 1.7;
}

.autoguru-prose > *:first-child { margin-top: 0; }
.autoguru-prose > *:last-child  { margin-bottom: 0; }

.autoguru-prose h1,
.autoguru-prose h2,
.autoguru-prose h3,
.autoguru-prose h4,
.autoguru-prose h5,
.autoguru-prose h6 {
    color: var(--primary-color);
    margin: 1.8em 0 0.7em;
    line-height: 1.25;
}

.autoguru-prose h1 { font-size: 40px; }
.autoguru-prose h2 { font-size: 32px; }
.autoguru-prose h3 { font-size: 24px; }
.autoguru-prose h4 { font-size: 20px; }

.autoguru-prose p { margin-bottom: 1.2em; }

.autoguru-prose a {
    color: var(--primary-color);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.autoguru-prose a:hover { color: var(--accent-color); }

.autoguru-prose ul,
.autoguru-prose ol {
    margin: 0 0 1.2em;
    padding-left: 1.4em;
}

.autoguru-prose ul { list-style: disc; }
.autoguru-prose ol { list-style: decimal; }
.autoguru-prose li { margin-bottom: 0.5em; }

.autoguru-prose blockquote {
    margin: 1.6em 0;
    padding: 20px 26px;
    background: var(--secondary-color);
    border-left: 4px solid var(--accent-color);
    border-radius: 8px;
    color: var(--primary-color);
    font-size: 18px;
}

.autoguru-prose blockquote p:last-child { margin-bottom: 0; }

.autoguru-prose img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 1.4em 0;
}

.autoguru-prose table {
    width: 100%;
    margin: 1.4em 0;
    border-collapse: collapse;
    font-size: 15px;
}

.autoguru-prose th,
.autoguru-prose td {
    padding: 12px 14px;
    border: 1px solid var(--divider-color);
    text-align: left;
    vertical-align: top;
}

.autoguru-prose thead th {
    background: var(--secondary-color);
    color: var(--primary-color);
    font-weight: 600;
}

.autoguru-prose code {
    background: var(--secondary-color);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
}

.autoguru-prose pre {
    background: var(--primary-color);
    color: #fff;
    padding: 18px 20px;
    border-radius: 10px;
    overflow-x: auto;
    margin: 1.4em 0;
}

.autoguru-prose pre code {
    background: none;
    padding: 0;
    color: inherit;
}

.autoguru-prose hr {
    border: 0;
    border-top: 1px solid var(--divider-color);
    margin: 2em 0;
}

/* Le contenu large ne doit jamais faire deborder la page horizontalement. */
.autoguru-prose .table-responsive,
.autoguru-prose figure {
    overflow-x: auto;
}

/* --------------------------------------------------------------------------
   5. Section « contenu » : rythme vertical quand elle est seule sur la page
   -------------------------------------------------------------------------- */
.autoguru-content-section {
    padding: 100px 0;
}

@media (max-width: 767px) {
    .autoguru-content-section { padding: 60px 0; }
    .autoguru-prose h1 { font-size: 30px; }
    .autoguru-prose h2 { font-size: 25px; }
    .autoguru-prose h3 { font-size: 21px; }
}

/* --------------------------------------------------------------------------
   6. Blog — ce que le gabarit ne fournit pas
   Autoguru livre une liste d'articles et une page article, mais AUCUNE regle
   pour la pagination, la ligne de metadonnees, le sommaire ni l'etat vide.
   -------------------------------------------------------------------------- */
.post-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-bottom: 12px;
    font-size: 14px;
    color: var(--text-color);
}

.post-item-meta span + span {
    position: relative;
    padding-left: 18px;
}

.post-item-meta span + span::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 4px;
    height: 4px;
    margin-top: -2px;
    border-radius: 50%;
    background: var(--accent-color);
}

.autoguru-blog-empty {
    text-align: center;
    color: var(--text-color);
    padding: 40px 0;
    margin: 0;
}

.autoguru-pagination {
    display: flex;
    justify-content: center;
    margin-top: 50px;
}

.autoguru-pagination ul,
.autoguru-pagination .pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.autoguru-pagination a,
.autoguru-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--divider-color);
    border-radius: 100px;
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
}

.autoguru-pagination a:hover,
.autoguru-pagination .active > span,
.autoguru-pagination [aria-current="page"] {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--btn-label-color);
}

.autoguru-pagination .disabled > span {
    opacity: .45;
}

/* Sommaire d'article */
.autoguru-toc {
    background: var(--secondary-color);
    border-left: 4px solid var(--accent-color);
    border-radius: 8px;
    padding: 22px 26px;
    margin: 0 0 32px;
}

.autoguru-toc h2 {
    font-size: 18px;
    margin: 0 0 12px;
    color: var(--primary-color);
}

.autoguru-toc ol {
    margin: 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.autoguru-toc a {
    color: var(--primary-color);
    text-decoration: none;
}

.autoguru-toc a:hover {
    color: var(--accent-color);
    text-decoration: underline;
}

.autoguru-post-intro {
    font-size: 18px;
    margin-bottom: 28px;
}

.autoguru-post-cta {
    margin-top: 32px;
}

/* Retour du formulaire de contact (envoi reussi / erreur) : le gabarit n'a pas de
   style pour ce message, il passerait inapercu. */
.appointment-form-feedback {
    margin: 0 0 18px;
    padding: 12px 16px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--accent-color) 18%, transparent);
    border: 1px solid var(--accent-color);
    color: var(--white-color);
    font-size: 15px;
}

.appointment-form-feedback.is-error {
    background: color-mix(in srgb, var(--error-color) 18%, transparent);
    border-color: var(--error-color);
}

.contact-us-form .appointment-form-feedback,
.autoguru-content-section .appointment-form-feedback {
    color: var(--primary-color);
}

/* --------------------------------------------------------------------------
   7. TELEPHONE ET E-MAIL CLIQUABLES

   Le gabarit d'origine ecrit le telephone et l'e-mail en TEXTE BRUT. Ici ce
   sont de vrais liens `tel:` et `mailto:` — on peut appeler depuis un mobile,
   ouvrir son client mail d'un clic. Mais le theme n'a AUCUNE regle de couleur
   pour `a` (son seul bloc `a{}` ne fait que retirer le soulignement) : ces
   liens retombaient donc sur le bleu par defaut du navigateur, sur un pied de
   page sombre. Tres visible, et pas beau.

   La couleur vient du reglage « Telephone et e-mail cliquables »
   (Personnaliser -> Couleurs). Repli : le jaune du theme, lisible aussi bien
   sur les sections sombres que sur les encarts colores.
   -------------------------------------------------------------------------- */
.footer-contact-item-stone p a,
.footer-contact-item p a,
.footer-contact-item-metal p a,
.faq-cta-item-content h3 a,
.faq-cta-box-stone a[href^="tel:"],
.faq-cta-box-stone a[href^="mailto:"],
.sidebar-cta-header-content h3 a,
.why-choose-contact-box-content p a,
.team-contact-item-content p a {
    /* Repli en cascade : le reglage dedie s'il est renseigne, sinon le jaune deja
       choisi pour les etoiles (c'est le jaune de la marque dans les faits), sinon
       celui du theme. Le pied de page est sombre : un jaune y reste lisible. */
    color: var(--contact-link-color, var(--rating-color, #E5DF5D));
    transition: color 0.3s ease-in-out;
}

.footer-contact-item-stone p a:hover,
.footer-contact-item p a:hover,
.footer-contact-item-metal p a:hover,
.faq-cta-item-content h3 a:hover,
.faq-cta-box-stone a[href^="tel:"]:hover,
.faq-cta-box-stone a[href^="mailto:"]:hover,
.sidebar-cta-header-content h3 a:hover,
.why-choose-contact-box-content p a:hover,
.contact-info-item a[href^="tel:"]:hover,
.contact-info-item a[href^="mailto:"]:hover,
.team-contact-item-content p a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Les cartes de la page CONTACT sont l'exception : elles ne sont PAS sombres.

   Au repos, `.contact-info-item` est peinte en `--secondary-color`, une teinte
   PALE (#f0f6f1 chez Le Trefle). Le jaune de la regle ci-dessus y passait le
   telephone en #ffcb08 sur un fond presque blanc : lisible sur un pied de page
   sombre, illisible ici. Ces liens prennent donc la couleur de titre normale,
   heritee du `h3` qui les entoure (`custom.css` : `color: inherit`), soit le
   noir du theme.

   Le pied de page, lui, GARDE le jaune : il est sombre, c'est la que la regle
   ci-dessus a ete ecrite, et c'est la couleur voulue.
   -------------------------------------------------------------------------- */
.contact-info-item a[href^="tel:"],
.contact-info-item a[href^="mailto:"] {
    transition: color 0.3s ease-in-out;
}

/* Une carte MISE EN AVANT (`active` / `highlighted-box`) — et toute carte
   SURVOLEE — est remplie par son `::before` avec la couleur d'accent. Le noir
   n'y tient plus : on repasse au libelle de bouton, deja choisi pour etre
   lisible sur l'accent (blanc chez Le Trefle).

   ⚠️ Le `:hover` est indispensable et n'y etait pas : sans lui, survoler la
   carte « Nous appeler » peignait le fond en vert en laissant le numero en
   noir. */
.contact-info-item.active a[href^="tel:"],
.contact-info-item.active a[href^="mailto:"],
.contact-info-item.highlighted-box a[href^="tel:"],
.contact-info-item.highlighted-box a[href^="mailto:"],
.contact-info-item:hover a[href^="tel:"],
.contact-info-item:hover a[href^="mailto:"] {
    color: var(--btn-label-color, #222222);
}

/* --------------------------------------------------------------------------
   8. FENETRE « NOS AGENCES » (composant contact-info)

   Une enseigne a plusieurs adresses n'a pas UN numero. L'encart telephone
   affiche celui du siege ; le bouton ouvre la liste complete, une carte par
   agence : adresse, horaires, et son propre bouton d'appel.

   Modale Bootstrap 5 pilotee en `data-bs-*` — aucun JS dans le composant, qui
   est rendu AVANT le chargement de `bootstrap.min.js` (fin de body).
   -------------------------------------------------------------------------- */

/* Le bouton dans la carte. `z-index: 1` obligatoire : le `::before` de
   `.contact-info-item` (le remplissage a l'accent au survol) est en z-index 0
   et passerait DEVANT, rendant le bouton incliquable une fois la carte survolee. */
.contact-info-item-cta {
    position: relative;
    z-index: 1;
    margin-top: 30px;
}

/* Encart reduit a son seul bouton (le client a vide titre, phrase et coordonnee
   pour ne garder que l'appel a l'action). Il n'y a plus rien au-dessus : la marge
   du bouton n'a plus de sens, et un bouton colle en haut d'une carte vide se lit
   comme un oubli. On centre, verticalement et horizontalement. */
.contact-info-item-solo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-info-item-solo .contact-info-item-cta {
    margin-top: 0;
}

/* Le libelle du bouton est souvent une phrase (« Appel gratuit ») : on garde la
   capitale du theme mais on autorise le retour a la ligne sur mobile. */
.contact-info-item-cta .btn-agences {
    text-transform: none;
    white-space: nowrap;
}

/* Une carte SURVOLEE ou MISE EN AVANT est remplie a l'accent : un bouton de la
   meme couleur y disparaitrait. On l'inverse — fond du libelle, texte accent. */
.contact-info-item:hover .contact-info-item-cta .btn-default,
.contact-info-item.active .contact-info-item-cta .btn-default,
.contact-info-item.highlighted-box .contact-info-item-cta .btn-default {
    background: var(--btn-label-color, #ffffff);
    color: var(--accent-color);
}

.agences-modal .modal-content {
    border: none;
    border-radius: 20px;
    background-color: var(--white-color, #ffffff);
    overflow: hidden;
}

.agences-modal .modal-header {
    align-items: flex-start;
    gap: 20px;
    border-bottom: 1px solid var(--divider-color);
    padding: 24px 28px;
}

.agences-modal .modal-title {
    font-size: 26px;
    line-height: 1.2em;
    margin: 0;
    color: var(--primary-color);
}

.agences-modal .modal-body {
    padding: 24px 28px 28px;
}

.agences-modal-intro {
    margin: 0 0 24px;
    color: var(--text-color);
}

/* Deux colonnes des qu'il y a la place : quatre agences empilees obligeraient a
   faire defiler la fenetre pour comparer deux adresses. */
.agences-modal-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.agence-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background-color: var(--secondary-color);
    border-radius: 12px;
    padding: 22px;
}

.agence-card-name {
    font-size: 19px;
    line-height: 1.3em;
    margin: 0 0 16px;
    color: var(--primary-color);
}

.agence-card-line {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

/* --------------------------------------------------------------------------
   Pictogrammes de la fenetre : MASQUE CSS, pas une balise <img>.

   Les SVG du theme (`icon-phone-accent.svg`, `clock-accent.svg`…) portent leur
   couleur EN DUR — le jaune du theme d'origine. Poses tels quels ils sortaient
   jaune pale sur les cartes, et le bouton d'appel affichait un pictogramme NOIR
   a cote d'un libelle BLANC (constate au premier rendu). Un filtre `brightness`
   ne resout rien : il faudrait savoir si le libelle est clair ou sombre, ce que
   CSS ne peut pas tester.

   Avec un masque, le SVG ne sert que de FORME : la couleur vient du CSS. Les
   lignes prennent l'accent du site, le pictogramme du bouton prend `currentColor`
   — donc exactement la couleur du libelle, survol compris, sur n'importe quel
   site et quel que soit le reglage « Libelle des boutons ».
   -------------------------------------------------------------------------- */
.agence-card-icon {
    display: inline-block;
    width: 20px;
    min-width: 20px;
    height: 20px;
    background-color: var(--accent-color);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.agence-card-line .agence-card-icon {
    margin-top: 3px;
}

.agence-card-icon-place {
    -webkit-mask-image: url('../images/icon-location-accent.svg');
    mask-image: url('../images/icon-location-accent.svg');
}

.agence-card-icon-clock {
    -webkit-mask-image: url('../images/clock-accent.svg');
    mask-image: url('../images/clock-accent.svg');
}

.agence-card-icon-phone {
    width: 18px;
    min-width: 18px;
    height: 18px;
    background-color: currentColor;
    -webkit-mask-image: url('../images/icon-phone-accent.svg');
    mask-image: url('../images/icon-phone-accent.svg');
}

.agence-card-line p {
    margin: 0;
    font-size: 15px;
    line-height: 1.55em;
    color: var(--text-color);
    /* Les horaires sont saisis en plusieurs lignes dans le back-office : on les
       respecte, sinon tout se retrouve sur une seule ligne illisible. */
    white-space: pre-line;
}

/* Le bouton d'appel de l'agence. Pas de `.btn-default::before` ici (la pastille
   fleche du theme) : l'icone telephone tient ce role, et la fleche ferait croire
   a une navigation alors que le lien declenche un appel. */
.agence-card .agence-card-call {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding: 13px 22px;
    font-size: 15px;
    text-transform: none;
    white-space: nowrap;
}

.agence-card .agence-card-call::before,
.agence-card .agence-card-call::after {
    content: none;
}

.agence-card-phone-text {
    margin: 4px 0 0;
    font-weight: 700;
    color: var(--primary-color);
}

@media only screen and (max-width: 767px) {
    .agences-modal-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .agences-modal .modal-header,
    .agences-modal .modal-body {
        padding-left: 18px;
        padding-right: 18px;
    }

    .agences-modal .modal-title {
        font-size: 22px;
    }
}

/* --------------------------------------------------------------------------
   9. PIED DE PAGE « STONE » : UNE COLONNE PAR AGENCE

   Le gabarit d'origine n'a qu'UNE colonne « coordonnées » : une adresse, des
   horaires, un téléphone. Une enseigne à quatre agences n'entre pas là-dedans —
   et lister quatre adresses à la file rend le pied de page illisible.

   Ici : une bande dédiée, quatre colonnes distinctes (encadrées, sur fond très
   légèrement éclairci pour se détacher du bloc sombre qui les porte), chacune
   avec son adresse, ses horaires, sa ligne directe et ses trois raccourcis
   d'itinéraire (Waze, Google Maps, Partager).

   Tout est branché sur les variables du thème : la personnalisation du site
   (« Personnaliser » -> Couleurs) reste prioritaire.
   -------------------------------------------------------------------------- */
.footer-agences-stone {
    border-top: 1px solid var(--dark-divider-color);
    margin-top: 50px;
    padding-top: 50px;
}

.footer-agences-title-stone {
    font-size: 20px;
    color: var(--white-color);
    margin-bottom: 30px;
}

/* Quatre colonnes tant qu'il y a la place. `minmax(0, 1fr)` et non `1fr` :
   sans le minimum à zéro, une adresse longue élargit sa colonne et fait
   déborder la grille. */
.footer-agences-grid-stone {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.footer-agence-stone {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: color-mix(in srgb, var(--white-color) 5%, transparent);
    border: 1px solid var(--dark-divider-color);
    border-radius: 10px;
    padding: 26px 24px;
}

.footer-agence-name-stone {
    font-size: 18px;
    line-height: 1.35em;
    color: var(--white-color);
    margin: 0;
}

.footer-agence-line-stone {
    display: flex;
    align-items: start;
    gap: 10px;
}

.footer-agence-line-stone i {
    font-size: 15px;
    color: var(--accent-color);
    margin-top: 4px;
    min-width: 16px;
}

.footer-agence-line-stone p {
    width: calc(100% - 26px);
    font-size: 15px;
    line-height: 1.5em;
    color: var(--white-color);
    margin: 0;
    /* Adresse et horaires sont saisis sur plusieurs lignes dans le back-office :
       sans ceci, tout se retrouve sur une seule ligne. */
    white-space: pre-line;
}

/* Le téléphone reprend la couleur des liens de contact du pied de page (règle 7). */
.footer-agence-line-stone p a {
    color: var(--contact-link-color, var(--rating-color, #E5DF5D));
    transition: color 0.3s ease-in-out;
}

.footer-agence-line-stone p a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Les trois raccourcis restent collés en bas de la colonne (`margin-top: auto`)
   pour que les quatre rangées de boutons s'alignent, quelle que soit la longueur
   des horaires au-dessus. */
.footer-agence-actions-stone {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
    padding-top: 4px;
}

/* `flex: 1 1 auto` : les trois raccourcis se partagent la largeur de la colonne.
   Ils tiennent sur une seule ligne tant qu'il y a la place ; quand la colonne se
   resserre, la ligne qui passe dessous s'etire elle aussi sur toute la largeur —
   le retour a la ligne a alors l'air voulu, et non subi. */
.footer-agence-btn-stone {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 13px;
    line-height: 1em;
    white-space: nowrap;
    color: var(--white-color);
    background: transparent;
    border: 1px solid var(--accent-color);
    border-radius: 30px;
    padding: 9px 10px;
    text-transform: none;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.footer-agence-btn-stone i {
    font-size: 13px;
    color: var(--accent-color);
    transition: color 0.3s ease-in-out;
}

.footer-agence-btn-stone:hover,
.footer-agence-btn-stone.is-done {
    color: var(--btn-label-color, var(--primary-color));
    background: var(--accent-color);
}

.footer-agence-btn-stone:hover i,
.footer-agence-btn-stone.is-done i {
    color: inherit;
}

/* Le bouton de l'accroche ouvre la fenetre des agences : c'est donc un <button>
   et non un <a>. Deux proprietes qu'un bouton n'herite pas du theme, et dont
   l'absence se voit tout de suite : la police (sinon le libelle sort dans la
   police systeme du navigateur, au milieu d'un pied de page en Inter Tight) et
   le curseur (une main, sinon rien ne dit que c'est cliquable). */
.btn-agences-stone {
    font-family: inherit;
    cursor: pointer;
    text-align: center;
}

@media only screen and (max-width: 1200px) {
    .footer-agences-grid-stone {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media only screen and (max-width: 767px) {
    .footer-agences-stone {
        margin-top: 35px;
        padding-top: 35px;
    }

    .footer-agences-grid-stone {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* --------------------------------------------------------------------------
   9. COMPOSANT « NOS AGENCES » (locations-list) — n'existe pas dans le theme.

   La carte reprend la maille de `.course-item` (meme rayon, meme fond
   `--secondary-color` sur la page, meme pastille d'accent sur la photo) pour
   que la page contact reste homogene, mais elle porte ici TROIS blocs
   d'information distincts — adresse, horaires, telephone — au lieu d'un seul
   paragraphe, plus une rangee de boutons Waze / Maps / Partager.
   -------------------------------------------------------------------------- */
.autoguru-locations .autoguru-location-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: var(--secondary-color);
    border-radius: 10px;
    height: calc(100% - 30px);
    margin-bottom: 30px;
    padding: 10px;
    /* L'ancre partagee ne doit pas arriver sous l'en-tete colle. */
    scroll-margin-top: 120px;
}

.autoguru-location-image-box {
    position: relative;
}

.autoguru-location-image figure {
    border-radius: 10px;
    overflow: hidden;
    margin: 0;
}

.autoguru-location-image img {
    width: 100%;
    aspect-ratio: 1 / 0.647;
    object-fit: cover;
    border-radius: 10px;
    transition: all 0.6s ease-in-out;
}

.autoguru-location-item:hover .autoguru-location-image img {
    transform: scale(1.06);
}

.autoguru-location-image-box .icon-box {
    position: absolute;
    bottom: 20px;
    left: 20px;
    width: 46px;
    height: 46px;
    background-color: var(--accent-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--btn-label-color, var(--primary-color));
    font-size: 18px;
    z-index: 1;
}

.autoguru-location-body {
    flex: 1 1 auto;
    padding: 20px 20px 0;
}

.autoguru-location-body h3 {
    font-size: 20px;
    margin: 0 0 15px;
}

/* Chaque information est une ligne « icone + texte ». Les retours a la ligne
   saisis par le client sont rendus en <br> : c'est tout l'interet du composant,
   on ne les ecrase donc sous aucun pretexte. */
.autoguru-location-meta {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.autoguru-location-meta li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.5;
}

.autoguru-location-meta li > i {
    flex: 0 0 16px;
    width: 16px;
    text-align: center;
    color: var(--accent-color);
    font-size: 14px;
    line-height: 1.6;
}

.autoguru-location-meta a {
    color: inherit;
    font-weight: 500;
    transition: color 0.3s ease-in-out;
}

.autoguru-location-meta a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.autoguru-location-note {
    margin: 15px 0 0;
    font-size: 14px;
    font-style: italic;
    opacity: 0.85;
}

/* --------------------------------------------------------------------------
   Horaires en TABLEAU (jour | creneau)

   En prose — « Bureau : lundi 9 h - 17 h, mardi au vendredi... » — le visiteur
   doit relire toute la phrase pour trouver SON jour. Deux colonnes repondent
   d'un coup d'oeil, et c'est aussi la structure exacte de la donnee.
   -------------------------------------------------------------------------- */
.autoguru-location-hours {
    width: 100%;
    margin: 14px 0 0;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 1.45;
}

/* `caption` est centre par defaut ; le reste de la carte est aligne a gauche.
   L'icone reprend celle des autres lignes d'information, meme gabarit. */
.autoguru-location-hours caption {
    caption-side: top;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    padding: 0 0 8px;
    font-weight: 700;
    color: var(--primary-color);
}

.autoguru-location-hours caption i {
    flex: 0 0 16px;
    width: 16px;
    text-align: center;
    color: var(--accent-color);
    font-size: 14px;
}

.autoguru-location-hours th,
.autoguru-location-hours td {
    padding: 6px 0;
    vertical-align: top;
    border-bottom: 1px solid var(--divider-color);
}

.autoguru-location-hours tr:last-child th,
.autoguru-location-hours tr:last-child td {
    border-bottom: none;
}

/* Colonne JOUR au plus juste. `width: 1%` + `white-space: nowrap` est l'idiome
   qui fait qu'une colonne prend exactement la place de son contenu et laisse
   tout le reste a la seconde — sans deviner une largeur en pixels. */
.autoguru-location-hours th {
    width: 1%;
    white-space: nowrap;
    padding-right: 14px;
    text-align: left;
    font-weight: 700;
    color: var(--primary-color);
}

.autoguru-location-hours td {
    color: var(--text-color);
}

/* Ligne saisie sans separateur : une note, pas un creneau. */
.autoguru-location-hours-note {
    font-style: italic;
    opacity: 0.85;
}

/* --------------------------------------------------------------------------
   Bouton d'appel : le bouton principal du theme (`btn-default btn-highlighted`).

   Pose en fin de bloc texte, AVANT la rangee Waze/Maps qui reste collee au bas
   de la carte. `.btn-default` reserve 55 px a droite pour sa pastille flechee :
   on garde ce gabarit tel quel, c'est le design demande.
   -------------------------------------------------------------------------- */
.autoguru-location-call {
    display: inline-block;
    margin-top: 16px;
    text-transform: none;
    white-space: nowrap;
}

/* Sous 480 px la carte prend toute la largeur : le bouton aussi, c'est une
   cible tactile plus sure qu'une pilule de 190 px. */
@media only screen and (max-width: 480px) {
    .autoguru-location-call {
        display: block;
    }
}

/* Rangee Waze / Maps / Partager, collee au BAS de la carte : les cartes d'une
   meme ligne n'ont pas la meme hauteur de texte, les boutons doivent malgre
   tout s'aligner. */
.autoguru-location-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    padding: 20px;
    border-top: 1px solid var(--divider-color);
}

.autoguru-location-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--divider-color);
    border-radius: 100px;
    background-color: transparent;
    color: var(--primary-color);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    padding: 9px 14px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.autoguru-location-btn:hover,
.autoguru-location-btn:focus-visible {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--btn-label-color, var(--primary-color));
}

.autoguru-location-btn i {
    font-size: 14px;
}

/* Trois boutons dans une carte de 200 px : ils ne tiennent pas sur une rangee.
   On les fait donc GRANDIR a parts egales — deux boutons larges, puis un en
   pleine largeur — plutot que trois pastilles serrees a gauche et un vide a
   droite, qui se lit comme un defaut de mise en page. */
.autoguru-location-actions .autoguru-location-btn {
    flex: 1 1 auto;
    justify-content: center;
}

/* --------------------------------------------------------------------------
   Modale de partage du composant « Nos agences ».

   `.autoguru-share-fallback` est le repli quand Bootstrap n'a pas (encore) pose
   son objet global : le composant affiche alors la modale a la main, et ces
   regles lui rendent son voile.
   -------------------------------------------------------------------------- */
.autoguru-share-modal .modal-content {
    border: none;
    border-radius: 14px;
    padding: 6px;
}

.autoguru-share-modal .modal-header {
    border-bottom: 1px solid var(--divider-color);
}

.autoguru-share-modal .modal-title {
    font-size: 20px;
    margin: 0;
}

.autoguru-share-target {
    margin: 0 0 18px;
    font-size: 15px;
}

.autoguru-share-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
}

.autoguru-share-net {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--divider-color);
    border-radius: 10px;
    padding: 12px;
    color: var(--primary-color);
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease-in-out;
}

.autoguru-share-net i {
    width: 20px;
    text-align: center;
    font-size: 16px;
}

/* Couleurs officielles des reseaux : ce sont des MARQUES, pas la palette du
   site. On ne les branche donc pas sur --accent-color — un visiteur reconnait
   le bleu Facebook et le vert WhatsApp, pas le vert de l'auto-ecole. */
.autoguru-share-net.is-facebook i  { color: #1877f2; }
.autoguru-share-net.is-x i         { color: #000000; }
.autoguru-share-net.is-whatsapp i  { color: #25d366; }
.autoguru-share-net.is-telegram i  { color: #229ed9; }
.autoguru-share-net.is-linkedin i  { color: #0a66c2; }
.autoguru-share-net.is-pinterest i { color: #e60023; }
.autoguru-share-net.is-reddit i    { color: #ff4500; }
.autoguru-share-net.is-mail i      { color: var(--primary-color); }
.autoguru-share-net.is-sms i       { color: var(--primary-color); }

.autoguru-share-net:hover,
.autoguru-share-net:focus-visible {
    border-color: var(--accent-color);
    background-color: var(--secondary-color);
    color: var(--primary-color);
}

.autoguru-share-link {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.autoguru-share-link input {
    flex: 1 1 220px;
    min-width: 0;
    border: 1px solid var(--divider-color);
    border-radius: 100px;
    padding: 9px 16px;
    font-size: 14px;
    background-color: var(--white-color);
    color: var(--text-color);
}

.autoguru-location-btn.is-done {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--btn-label-color, var(--primary-color));
}

.autoguru-share-native {
    width: 100%;
    margin-top: 18px;
    justify-content: center;
    padding: 12px 16px;
}

/* Repli sans Bootstrap : le voile que `.modal.show` seul n'apporte pas. */
.modal.autoguru-share-fallback {
    background-color: rgba(0, 0, 0, 0.5);
    overflow-y: auto;
}

@media only screen and (max-width: 767px) {
    .autoguru-location-actions {
        padding: 16px;
    }

    .autoguru-share-grid {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    }
}

/* --------------------------------------------------------------------------
   Coordonnees (contact-info) : la liste est figee a trois colonnes de 33,33 %.
   Une page qui n'affiche que DEUX encarts — cas d'une enseigne a plusieurs
   agences, ou l'adresse unique n'a plus de sens et vit dans « Nos agences » —
   laissait donc un tiers de vide a droite. On ne redimensionne QUE ce cas-la :
   le rendu a un ou trois encarts reste exactement celui du theme.
   -------------------------------------------------------------------------- */
.contact-info-list:has(.contact-info-item:nth-child(2):last-child) .contact-info-item {
    width: calc(50% - 15px);
}

/* --------------------------------------------------------------------------
   10. MUR D'AVIS GOOGLE — PLEINE LARGEUR

   Le gabarit n'a rien de tel : ses avis vivent dans un carrousel Swiper, cale
   dans un `.container` de 1500 px. Ici on veut que le mur DEBORDE, qu'il touche
   les deux bords de l'ecran.

   `margin-left: calc(50% - 50vw)` sort le bloc de son conteneur sans le sortir
   du flux. On n'utilise PAS `100vw` seul : sur les navigateurs qui comptent la
   barre de defilement dans `vw`, ca provoque un debordement horizontal de toute
   la page — le bug le plus classique de cette technique.

   Trois rangees sur ordinateur, UNE SEULE sur telephone : trois pistes qui
   glissent sur un ecran de 390 px ne se lisent pas.
   -------------------------------------------------------------------------- */
.autoguru-avis-google {
    padding: 100px 0;
    overflow: hidden; /* garde-fou : aucune piste ne doit elargir la page */
}

.autoguru-avis-note {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-bottom: 50px;
}

.autoguru-avis-note-valeur {
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    color: var(--primary-color);
}

.autoguru-avis-note-valeur sub {
    font-size: 16px;
    font-weight: 500;
    bottom: 0;
    color: var(--text-color);
}

.autoguru-avis-etoiles {
    display: inline-flex;
    gap: 3px;
    color: var(--rating-color, #E5DF5D);
    font-size: 15px;
}

.autoguru-avis-note-mention {
    color: var(--text-color);
    font-size: 15px;
}

.autoguru-avis-lien {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.autoguru-avis-lien:hover {
    color: var(--accent-color);
}

/* --- Les pistes --- */
.autoguru-avis-pistes {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.autoguru-avis-piste {
    overflow: hidden;
    /* Les cartes s'effacent sur les deux bords : sans ca, elles semblent coupees
       au couteau au ras de l'ecran. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%);
}

.autoguru-avis-ruban {
    display: flex;
    width: max-content;
    animation: autoguru-avis-defile calc(var(--autoguru-avis-nb, 8) * 7s) linear infinite;
}

.autoguru-avis-piste--inverse .autoguru-avis-ruban {
    animation-direction: reverse;
}

/* On suspend au survol : le visiteur qui veut lire un avis doit pouvoir le faire. */
.autoguru-avis-piste:hover .autoguru-avis-ruban,
.autoguru-avis-piste:focus-within .autoguru-avis-ruban {
    animation-play-state: paused;
}

@keyframes autoguru-avis-defile {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.autoguru-avis-liste {
    display: flex;
    gap: 24px;
    margin: 0 12px 0 0;
    padding: 0;
    list-style: none;
}

.autoguru-avis-carte {
    flex: 0 0 auto;
    width: 340px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 26px;
    border-radius: 20px;
    background: var(--secondary-color);
    border: 1px solid color-mix(in srgb, var(--primary-color) 8%, transparent);
}

.autoguru-avis-carte-tete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.autoguru-avis-texte {
    margin: 0;
    color: var(--text-color);
    font-size: 15px;
    line-height: 1.65em;
    /* Les avis Google vont de deux lignes a un paragraphe entier : on borne pour que
       les cartes gardent une hauteur comparable, sans couper le texte au milieu d'un mot. */
    display: -webkit-box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: pre-line; /* les retours a la ligne de l'avis d'origine sont conserves */
}

.autoguru-avis-carte-pied {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid color-mix(in srgb, var(--primary-color) 10%, transparent);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.autoguru-avis-auteur {
    font-weight: 600;
    color: var(--primary-color);
    font-size: 15px;
}

.autoguru-avis-meta {
    font-size: 13px;
    color: var(--text-color);
}

/* --- Telephone : une seule rangee, et des cartes qui tiennent a l'ecran --- */
@media (max-width: 767px) {
    .autoguru-avis-google { padding: 60px 0; }
    .autoguru-avis-piste[data-secondaire] { display: none; }
    .autoguru-avis-carte { width: 280px; padding: 22px; }
    .autoguru-avis-liste { gap: 16px; }
    .autoguru-avis-pistes { gap: 16px; }
    .autoguru-avis-piste {
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%);
                mask-image: linear-gradient(90deg, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%);
    }
}

/* --- Defilement desactive : reglage du composant, ou visiteur qui a demande
       moins d'animations. La piste devient alors defilable au doigt. --- */
.autoguru-avis-pistes--fixe .autoguru-avis-ruban {
    animation: none;
}

.autoguru-avis-pistes--fixe .autoguru-avis-piste {
    overflow-x: auto;
    scrollbar-width: none;
}

.autoguru-avis-pistes--fixe .autoguru-avis-piste::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: reduce) {
    .autoguru-avis-ruban { animation: none; }
    .autoguru-avis-piste { overflow-x: auto; scrollbar-width: none; }
    .autoguru-avis-piste::-webkit-scrollbar { display: none; }
}

/* --------------------------------------------------------------------------
   9. CARTES « NOS ADRESSES » : tableau d'horaires + bouton d'appel
   (composant courses-list, champs `item_N_hours` / `item_N_phone`)

   Le gabarit ne prevoit qu'un titre, un paragraphe et une photo. Des horaires
   ecrits en prose dans ce paragraphe (« Bureau : lundi 9 h - 17 h, mardi au
   vendredi... ») ne se lisent pas : on cherche SON jour, et il faut relire la
   phrase entiere. Un tableau donne la reponse d'un coup d'oeil.
   -------------------------------------------------------------------------- */
.course-item-hours {
    width: 100%;
    margin: 18px 0 0;
    border-collapse: collapse;
    font-size: 15px;
    line-height: 1.45em;
}

/* `caption` est centre par defaut, et le theme aligne tout a gauche. */
.course-item-hours caption {
    caption-side: top;
    text-align: left;
    padding: 0 0 8px;
    font-weight: 700;
    color: var(--primary-color);
}

.course-item-hours th,
.course-item-hours td {
    padding: 7px 0;
    vertical-align: top;
    border-bottom: 1px solid var(--divider-color);
}

.course-item-hours tr:last-child th,
.course-item-hours tr:last-child td {
    border-bottom: none;
}

/* Colonne JOUR : etroite et prioritaire. `width: 1%` + `white-space: nowrap`
   est l'idiome qui fait qu'une colonne prend juste la place de son contenu et
   laisse tout le reste a la seconde — sans avoir a deviner une largeur en px. */
.course-item-hours th {
    width: 1%;
    white-space: nowrap;
    padding-right: 14px;
    text-align: left;
    font-weight: 700;
    color: var(--primary-color);
}

.course-item-hours td {
    color: var(--text-color);
}

/* Ligne saisie sans barre verticale : une note, pas un creneau. */
.course-item-hours-note {
    font-style: italic;
}

/* Bouton d'appel : STRICTEMENT le design du bouton principal du theme
   (`.btn-default`, pastille flechee comprise), a la demande du client. Il est
   pose hors de `.course-item-header` pour rester colle au bas du bloc texte,
   au-dessus de la photo, quelle que soit la hauteur des horaires. */
.course-item-call-box {
    padding: 0 30px;
}

.course-item-call {
    display: inline-block;
    white-space: nowrap;
    text-transform: none;
}

/* Sous 480 px, la carte occupe toute la largeur : le bouton peut la prendre
   aussi, c'est une cible tactile plus sure qu'une pilule de 190 px. */
@media only screen and (max-width: 480px) {
    .course-item-call {
        display: block;
        text-align: left;
    }
}

/* --------------------------------------------------------------------------
   11. PAGE D'UNE AGENCE (composant location-single)

   Le gabarit n'a pas de page « point de vente ». On reprend le vocabulaire des
   cartes d'agences (`.autoguru-location-btn`, la fenetre de partage) pour que les
   deux se ressemblent, et on ajoute ce qui manque : photos, horaires en tableau,
   mentions administratives et carte.
   -------------------------------------------------------------------------- */
.autoguru-agence {
    padding: 100px 0;
}

.autoguru-agence-tete {
    align-items: center;
    row-gap: 40px;
}

.autoguru-agence-photos {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.autoguru-agence-photos:has(.autoguru-agence-photo--seconde) {
    grid-template-columns: 1.4fr 1fr;
}

.autoguru-agence-photo {
    margin: 0;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

.autoguru-agence-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.autoguru-agence-carte-info {
    padding-left: 20px;
}

.autoguru-agence-accroche {
    font-size: 19px;
    line-height: 1.6em;
    color: var(--primary-color);
    margin-bottom: 26px;
}

.autoguru-agence-coordonnees {
    list-style: none;
    margin: 0 0 26px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.autoguru-agence-coordonnees li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    color: var(--text-color);
    line-height: 1.6em;
}

.autoguru-agence-coordonnees i {
    color: var(--accent-color);
    font-size: 17px;
    margin-top: 4px;
    flex: 0 0 20px;
}

.autoguru-agence-coordonnees a {
    color: var(--primary-color);
    font-weight: 600;
}

.autoguru-agence-coordonnees a:hover {
    color: var(--accent-color);
}

.autoguru-agence-cta {
    margin-top: 26px;
}

/* --- Horaires et mentions --- */
.autoguru-agence-corps {
    margin-top: 70px;
    row-gap: 30px;
}

.autoguru-agence-bloc {
    background: var(--secondary-color);
    border-radius: 20px;
    padding: 30px;
}

.autoguru-agence-bloc + .autoguru-agence-bloc {
    margin-top: 20px;
}

.autoguru-agence-bloc h3 {
    margin-bottom: 18px;
    font-size: 20px;
}

.autoguru-agence-horaires {
    width: 100%;
    border-collapse: collapse;
}

.autoguru-agence-horaires th,
.autoguru-agence-horaires td {
    padding: 11px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--primary-color) 10%, transparent);
    font-size: 15px;
    line-height: 1.5em;
}

.autoguru-agence-horaires tr:last-child th,
.autoguru-agence-horaires tr:last-child td {
    border-bottom: 0;
}

.autoguru-agence-horaires th {
    text-align: left;
    font-weight: 600;
    color: var(--primary-color);
    white-space: nowrap;
    padding-right: 20px;
}

.autoguru-agence-horaires td {
    text-align: right;
    color: var(--text-color);
}

.autoguru-agence-bloc--mentions dl {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.autoguru-agence-bloc--mentions dl > div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-size: 14px;
}

.autoguru-agence-bloc--mentions dt {
    color: var(--text-color);
    font-weight: 500;
}

.autoguru-agence-bloc--mentions dd {
    margin: 0;
    color: var(--primary-color);
    font-weight: 600;
    text-align: right;
}

.autoguru-agence-map {
    height: 100%;
    min-height: 380px;
    border-radius: 20px;
    overflow: hidden;
}

.autoguru-agence-map iframe {
    width: 100%;
    height: 100%;
    min-height: 380px;
    border: 0;
    display: block;
}

/* --- Les autres agences --- */
.autoguru-agence-autres {
    margin-top: 90px;
    row-gap: 24px;
}

.autoguru-agence-autres .section-title {
    margin-bottom: 40px;
}

.autoguru-agence-lien {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px;
    border-radius: 18px;
    background: var(--secondary-color);
    transition: all 0.3s ease-in-out;
}

.autoguru-agence-lien:hover {
    background: color-mix(in srgb, var(--accent-color) 12%, var(--secondary-color));
    transform: translateY(-3px);
}

.autoguru-agence-lien figure {
    margin: 0;
    width: 84px;
    height: 84px;
    flex: 0 0 84px;
    border-radius: 14px;
    overflow: hidden;
}

.autoguru-agence-lien figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.autoguru-agence-lien-texte {
    flex: 1;
}

.autoguru-agence-lien h3 {
    font-size: 17px;
    margin-bottom: 4px;
    color: var(--primary-color);
}

.autoguru-agence-lien p {
    margin: 0;
    font-size: 14px;
    color: var(--text-color);
    line-height: 1.5em;
}

.autoguru-agence-lien > i {
    color: var(--accent-color);
    flex: 0 0 auto;
    transition: transform 0.3s ease-in-out;
}

.autoguru-agence-lien:hover > i {
    transform: translateX(4px);
}

@media (max-width: 1199px) {
    .autoguru-agence-carte-info { padding-left: 0; margin-top: 10px; }
}

@media (max-width: 767px) {
    .autoguru-agence { padding: 60px 0; }
    .autoguru-agence-photos:has(.autoguru-agence-photo--seconde) { grid-template-columns: 1fr; }
    .autoguru-agence-corps { margin-top: 40px; }
    .autoguru-agence-autres { margin-top: 55px; }
    .autoguru-agence-bloc { padding: 24px; }
    .autoguru-agence-map, .autoguru-agence-map iframe { min-height: 300px; }
}

/* --------------------------------------------------------------------------
   12. ICONE DE CHARGEMENT

   Le gabarit centre un volant de 66 px dans l'anneau qui tourne. On y met
   desormais la marque du client (favicon carre, en general le symbole) : il faut
   donc borner AUSSI la hauteur, sinon un logo en toutes lettres — large et bas —
   sort de l'anneau.
   -------------------------------------------------------------------------- */
#loading-icon img {
    max-width: 46px;
    max-height: 46px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Lien vers la page dediee d'une agence (`agency_N_url`). Le nom et la photo y
   renvoient aussi ; ce lien-la est celui qu'on voit, sous les boutons d'itineraire. */
.autoguru-location-more {
    padding: 0 20px 20px;
}

.autoguru-location-body h3 a {
    color: inherit;
    transition: color 0.3s ease-in-out;
}

.autoguru-location-body h3 a:hover {
    color: var(--accent-color);
}

/* --------------------------------------------------------------------------
   13. Panneaux des menus deroulants
   --------------------------------------------------------------------------
   Le theme fige les panneaux a 235 px (`custom.css`, deux regles). C'etait tenable
   pour « Home / Pages / Services », ca ne l'est plus avec « Permis B — boite
   automatique » ou « Conflans — place de la Liberte » : les libelles passaient a la
   ligne, en decalant les entrees suivantes.
   On laisse donc le panneau se dimensionner sur son contenu, avec 235 px comme
   plancher pour ne pas retrecir les menus courts.
   Uniquement au-dessus de 1024 px : en dessous, le theme bascule sur son menu
   mobile, ou le panneau est en flux et doit rester pleine largeur.
   -------------------------------------------------------------------------- */

@media only screen and (min-width: 1025px) {
    .main-menu ul ul,
    .main-menu ul li.submenu:first-child ul {
        width: auto;
        min-width: 235px;
    }

    .main-menu ul ul li a {
        white-space: nowrap;
    }
}