/**
 * Restor'Cars — styles des blocs Gutenberg custom.
 *
 * Chargé uniquement si la page contient au moins un bloc `restorcars/*`
 * (voir rc_has_restorcars_block() dans inc/blocks.php).
 *
 * Convention de nommage : rc-[composant]-[element]
 * Un bloc = une section commentée ci-dessous, dans l'ordre du chantier 03.
 *
 * @package RestorCars
 */

/* ==========================================================================
   0. Fondations communes aux blocs
   ========================================================================== */

.rc-block {
    /* Rythme vertical partagé — évite que chaque bloc réinvente ses marges */
    --rc-block-spacing-y: clamp(2.5rem, 6vw, 5rem);
    --rc-block-width: min(100% - 2.5rem, 68rem);

    padding-block: var(--rc-block-spacing-y);
}

.rc-block__inner {
    width: var(--rc-block-width);
    margin-inline: auto;
}

/* Alternance de fonds : beige parchemin / blanc cassé */
.rc-block--warm {
    background-color: var(--color-bg-warm, #F6EAD4);
}

.rc-block--light {
    background-color: var(--color-bg-light, #FAFAF7);
}

.rc-block__title {
    margin-block: 0 1.5rem;
    color: var(--color-primary, #043B58);
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    line-height: 1.15;
}

/* ==========================================================================
   Bloc restorcars/avis-google
   ========================================================================== */

.rc-avis__placeholder {
    padding: 2rem 1.5rem;
    text-align: center;
    background: var(--color-bg-warm, #F6EAD4);
    border-radius: 6px;
}

.rc-avis__placeholder.is-loaded {
    padding: 0;
    background: none;
}

.rc-avis__placeholder.is-loaded .rc-avis__placeholder-text {
    display: none;
}

.rc-avis__placeholder-text {
    margin: 0 0 1.25rem;
    color: var(--color-text-muted, #666);
    font-size: 0.9375rem;
}

.rc-avis__load,
.rc-button--accent {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border: 0;
    border-radius: 4px;
    background: var(--color-action, #CA4E24);
    color: #fff;
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
}

.rc-avis__load:hover,
.rc-avis__load:focus-visible,
.rc-button--accent:hover,
.rc-button--accent:focus-visible {
    background: var(--color-action-survol, #A83814);
    color: #fff;
}

.rc-avis__load[disabled] {
    opacity: 0.6;
    cursor: progress;
}

.rc-avis__cta {
    margin-top: 1.75rem;
    text-align: center;
}

/* ==========================================================================
   Bloc restorcars/hero
   --------------------------------------------------------------------------
   L'image est un <img> et non un fond CSS : c'est l'élément LCP de la page,
   et un fond n'est découvert qu'après le chargement de la feuille de style.
   ========================================================================== */

.rc-hero {
    position: relative;
    display: grid;
    isolation: isolate;
    background-color: var(--color-primary, #043B58);
}

.rc-hero--moyenne { min-height: clamp(22rem, 55vh, 32rem); }
.rc-hero--grande  { min-height: clamp(28rem, 75vh, 44rem); }

.rc-hero__media {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
}

.rc-hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Voile sombre : garantit le contraste du texte quelle que soit la photo.
   Sans lui, une image claire rendrait le titre illisible. */
.rc-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(4, 59, 88, 0.35) 0%,
        rgba(4, 59, 88, 0.68) 100%
    );
}

.rc-hero__contenu {
    display: flex;
    align-items: center;
    padding-block: clamp(3rem, 8vw, 6rem);
}

.rc-hero__inner {
    /*
     * Plafonné à la même largeur que l'en-tête des autres pages, et non plus à
     * 60 rem : le panneau du titre doit se rapprocher autant que possible de
     * celui qu'on voit ailleurs. Il reste un peu plus étroit, le bandeau vivant
     * à l'intérieur du conteneur de contenu — mais l'écart ne se perçoit pas
     * d'une page à l'autre.
     */
    width: min(100% - 2.5rem, var(--header-width, 75rem));
    margin-inline: auto;
    color: #fff;
    /*
     * Centré, comme l'en-tête de toutes les autres pages. C'est ce qui fait
     * lire le panneau ci-dessous comme le MÊME élément, et non comme un
     * habillage de plus.
     */
    text-align: center;
}

/*
 * LE TITRE DU BANDEAU — deux lignes dans un seul `h1`.
 *
 * Le panneau parchemin a été essayé ici puis retiré : posé sur la photo, il la
 * coupait en deux sans rien gagner en lisibilité. Sur les autres pages il vit
 * seul sur fond clair, et c'est là qu'il fonctionne. La continuité avec le
 * reste du site est portée par le filet, qui suffit.
 */
.rc-hero__titre {
    margin: 0 0 var(--space-md, 1.5rem);
    /* Le remplissage bas porte le filet : même valeur que sur les autres pages */
    padding-bottom: var(--space-md, 1.5rem);
    color: #fff;
    font-family: "Playfair Display", Georgia, serif;
    text-wrap: balance;
}

/* Le nom du garage : la ligne d'affiche. */
.rc-hero__nom {
    display: block;
    font-size: clamp(2.5rem, 7vw, 4.5rem);
    line-height: 1;
    letter-spacing: -0.01em;
}

/*
 * Ce que fait le garage, et où. Plus petit que le nom, mais toujours dans le
 * `h1` : c'est cette ligne qui porte les mots que les gens tapent.
 */
.rc-hero__baseline {
    display: block;
    margin-top: 0.5rem;
    font-size: clamp(1.125rem, 2.4vw, 1.625rem);
    font-weight: 400;
    line-height: 1.25;
    color: rgba(255, 255, 255, 0.94);
}

/*
 * Une ombre portée courte, en plus du voile sombre sur la photo. Le voile
 * garantit le contraste moyen ; l'ombre sauve les caractères qui tombent sur
 * une zone claire — un pare-brise, un bout de ciel.
 */
.rc-hero__titre,
.rc-hero__accroche {
    text-shadow: 0 1px 12px rgba(4, 42, 62, 0.55);
}

.rc-hero__accroche {
    max-width: 38rem;
    /* `auto` sur les côtés : l'accroche reste centrée sous le panneau */
    margin: 0 auto 1.75rem;
    color: rgba(255, 255, 255, 0.92);
    font-size: clamp(1.0625rem, 2vw, 1.25rem);
    line-height: 1.5;
}

.rc-hero__cta { margin: 0; }

/* ==========================================================================
   Bloc restorcars/section-texte
   ========================================================================== */

.rc-section__grille {
    display: grid;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
}

.rc-section__texte > :first-child { margin-top: 0; }
.rc-section__texte > :last-child  { margin-bottom: 0; }

.rc-section__texte p {
    margin-block: 0 1em;
    line-height: 1.65;
}

.rc-section__image {
    margin: 0;
}

.rc-section__image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
}

@media (min-width: 860px) {
    .rc-section--avec-image .rc-section__grille {
        grid-template-columns: 1fr 1fr;
    }

    /* L'image passe visuellement à gauche sans changer l'ordre du HTML :
       le texte reste lu en premier par les lecteurs d'écran. */
    .rc-section--image-gauche .rc-section__contenu { order: 2; }
    .rc-section--image-gauche .rc-section__image   { order: 1; }
}

/* ==========================================================================
   Bloc restorcars/services
   ========================================================================== */

.rc-services__intro {
    max-width: 44rem;
    margin: -0.5rem 0 2rem;
    color: var(--color-text-muted, #666);
    font-size: 1.0625rem;
}

.rc-services__liste {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

.rc-services__item {
    padding: 1.25rem 1.375rem;
    background: #fff;
    border-left: 3px solid var(--color-accent, #EE5C2B);
    border-radius: 4px;
}

.rc-services__titre {
    margin: 0 0 0.375rem;
    color: var(--color-primary, #043B58);
    font-size: 1.0625rem;
    line-height: 1.3;
}

.rc-services__desc {
    margin: 0;
    color: var(--color-text-muted, #666);
    font-size: 0.9375rem;
    line-height: 1.5;
}

/* ==========================================================================
   Bloc restorcars/derniers-projets
   --------------------------------------------------------------------------
   La grille `.rc-projets-grid` est définie dans projets.css, avec les cartes.
   Ce bloc réutilise l'une et les autres : rien n'est redéfini ici.
   ========================================================================== */

.rc-derniers-projets__lien {
    margin-top: 2rem;
    text-align: center;
}

/* ==========================================================================
   Bloc restorcars/cta-contact
   ========================================================================== */

.rc-cta {
    background-color: var(--color-primary, #043B58);
    color: #fff;
    text-align: center;
}

.rc-cta__titre {
    margin: 0 0 0.75rem;
    color: #fff;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(1.5rem, 3.5vw, 2.25rem);
    line-height: 1.2;
}

.rc-cta__texte {
    max-width: 36rem;
    margin: 0 auto 1.75rem;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.6;
}

.rc-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.75rem;
    align-items: center;
    justify-content: center;
    margin: 0;
}

.rc-cta__tel {
    color: #fff;
    font-size: 1.125rem;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid var(--color-accent, #EE5C2B);
    padding-bottom: 2px;
}

.rc-cta__tel:hover,
.rc-cta__tel:focus-visible {
    color: var(--color-accent, #EE5C2B);
}

/* ==========================================================================
   Bloc restorcars/coordonnees
   ========================================================================== */

.rc-coordonnees__grille {
    display: grid;
    gap: 1.75rem;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.rc-coordonnees__label {
    display: block;
    margin-bottom: 0.375rem;
    color: var(--color-text-muted, #666);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.rc-coordonnees__tel {
    display: inline-block;
    color: var(--color-primary, #043B58);
    font-size: 1.375rem;
    font-weight: 700;
    text-decoration: none;
}

.rc-coordonnees__tel:hover,
.rc-coordonnees__tel:focus-visible {
    color: var(--color-accent, #EE5C2B);
}

.rc-coordonnees__aide {
    display: block;
    margin-top: 0.25rem;
    color: var(--color-text-muted, #666);
    font-size: 0.8125rem;
}

.rc-coordonnees__adresse {
    font-style: normal;
    line-height: 1.5;
}

.rc-coordonnees__adresse span {
    display: block;
}

.rc-coordonnees__horaires {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 1.6;
    font-size: 0.9375rem;
}

/* ==========================================================================
   Bloc restorcars/sponsors
   ========================================================================== */

.rc-sponsors__intro {
    max-width: 44rem;
    margin: -0.5rem 0 2rem;
    color: var(--color-text-muted, #666);
}

.rc-sponsors__liste {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rc-sponsors__item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 6rem;
    padding: 1rem;
    background: #fff;
    border-radius: 4px;
}

.rc-sponsors__logo {
    max-width: 100%;
    height: auto;
    max-height: 4.5rem;
    object-fit: contain;
}

.rc-sponsors__nom {
    color: var(--color-primary, #043B58);
    font-weight: 600;
    text-align: center;
}

/* ==========================================================================
   Intégration d'un PDF (article de presse)
   --------------------------------------------------------------------------
   Le navigateur rend le PDF en vectoriel : net à toutes les tailles, et
   zoomable — contrairement à une capture d'écran aplatie.

   Sur mobile, les navigateurs rendent très mal un PDF en iframe (iOS Safari
   n'affiche souvent que le haut de la première page, sans défilement). On
   masque donc l'intégration sous 768px et on garde le bouton, qui ouvre le
   PDF dans la visionneuse native du téléphone — bien meilleure.
   ========================================================================== */

.rc-pdf-embed {
    /* Rapport hauteur/largeur de la page, posé par le bloc. A4 par défaut. */
    --rc-pdf-ratio: 1.4143;

    margin-block: 1.5rem;
}

/* Sous 768px : l'aperçu image remplace l'iframe (Chrome Android n'affiche
   pas de PDF en cadre intégré). Au-dessus, l'inverse. */
.rc-pdf-embed__frame {
    display: none;
}

.rc-pdf-embed__apercu {
    display: block;
    border: 1px solid rgba(4, 59, 88, 0.15);
    border-radius: 4px;
    overflow: hidden;
}

.rc-pdf-embed__apercu img {
    display: block;
    width: 100%;
    height: auto;
}

.rc-pdf-embed__link {
    display: block;
    text-align: center;
}

.rc-pdf-embed__source {
    margin-top: 0.75rem;
    text-align: center;
    font-size: 0.875rem;
    color: var(--color-text-muted, #666);
}

/* Mode aperçu : l'image seule, à toutes les tailles d'écran.
   Le clic emmène vers la page dédiée au document. */
.rc-pdf-embed--apercu .rc-pdf-embed__apercu {
    max-width: 32rem;
    margin-inline: auto;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.rc-pdf-embed--apercu .rc-pdf-embed__apercu:hover,
.rc-pdf-embed--apercu .rc-pdf-embed__apercu:focus-visible {
    box-shadow: 0 6px 20px rgba(4, 59, 88, 0.18);
    transform: translateY(-2px);
}

@media (min-width: 768px) {
    .rc-pdf-embed__apercu {
        display: none;
    }

    /* …sauf en mode aperçu, où elle est justement le contenu. */
    .rc-pdf-embed--apercu .rc-pdf-embed__apercu {
        display: block;
    }

    .rc-pdf-embed--apercu .rc-pdf-embed__frame {
        display: none;
    }

    .rc-pdf-embed__frame {
        display: block;

        /* La hauteur commande, la largeur suit : la page tient entière dans
           l'écran, sans défilement interne. Si la largeur disponible est trop
           faible, max-width reprend la main et la hauteur s'ajuste. */
        height: min(80vh, 900px);
        width: auto;
        max-width: 100%;
        aspect-ratio: 1 / var(--rc-pdf-ratio);
        margin-inline: auto;

        border: 1px solid rgba(4, 59, 88, 0.15);
        border-radius: 4px;
        background: #fff;
    }

    /* Page dédiée au document : plus grand, mais sans avaler la page —
       le pied de page doit rester à portée de défilement. */
    .rc-pdf-embed--grand .rc-pdf-embed__frame {
        height: min(85vh, 1200px);
    }

    .rc-pdf-embed__link {
        margin-top: 1rem;
    }
}

/* Image de contenu agrandissable : signale l'interaction possible. */
.wp-block-image a.glightbox {
    display: inline-block;
    cursor: zoom-in;
}

.wp-block-image a.glightbox img {
    transition: opacity 0.2s ease;
}

.wp-block-image a.glightbox:hover img,
.wp-block-image a.glightbox:focus-visible img {
    opacity: 0.9;
}

.wp-block-image a.glightbox:focus-visible {
    outline: 2px solid var(--color-accent, #EE5C2B);
    outline-offset: 3px;
}

/* Mode badge : lien superposé.
   Le widget TrustIndex renvoie vers trustindex.io sans qu'on puisse le
   désactiver. On recouvre donc le badge d'un lien à nous, qui gagne au clic. */
.rc-avis--badge .rc-avis__widget {
    position: relative;
    display: inline-block;
}

.rc-avis__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    text-indent: -9999px;
    overflow: hidden;
}

.rc-avis__overlay:focus-visible {
    outline: 2px solid var(--color-accent, #EE5C2B);
    outline-offset: 2px;
}

/* ==========================================================================
   Pages légales — mentions et politique de confidentialité
   --------------------------------------------------------------------------
   Du texte long, à lire d'un bout à l'autre. On plafonne la ligne autour de
   70 signes : au-delà, l'œil perd le début de la ligne suivante et relit deux
   fois le même passage. C'est justement le genre de page qu'on ne relit pas.
   ========================================================================== */

.rc-texte-legal .rc-block__inner {
    max-width: 44rem;
}

.rc-texte-legal p,
.rc-texte-legal li {
    line-height: 1.65;
}

.rc-texte-legal h2 {
    margin-block: var(--space-xl, 4rem) var(--space-xs, 0.625rem);
    color: var(--color-primary, #043B58);
    font-family: var(--font-heading, Georgia, serif);
    font-size: clamp(1.35rem, 2.5vw, 1.75rem);
    line-height: 1.2;
}

.rc-texte-legal h2:first-of-type {
    margin-top: var(--space-lg, 2.5rem);
}

.rc-texte-legal ul {
    padding-left: 1.25em;
}

.rc-texte-legal li {
    margin-bottom: var(--space-2xs, 0.375rem);
}

.rc-texte-legal a {
    color: var(--color-action, #CA4E24);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.rc-texte-legal a:hover,
.rc-texte-legal a:focus-visible {
    color: var(--color-primary, #043B58);
}

/* ==========================================================================
   Bloc restorcars/carte — plan d'accès, chargé au clic
   ========================================================================== */

.rc-carte__cadre {
    position: relative;
    /*
     * Hauteur fixée directement, sans `aspect-ratio`.
     *
     * La première version combinait `aspect-ratio: 16/9` et `min-height: 20rem`.
     * Sur mobile, la hauteur minimale l'emportait, et le navigateur recalculait
     * alors la LARGEUR à partir de cette hauteur : 568 px dans un conteneur de
     * 335 px. Le cadre débordait, adresse et bouton coupés.
     *
     * Une largeur explicite et une hauteur bornée ne peuvent pas produire cet
     * effet. La hauteur reste la même avant et après le clic : la page ne fait
     * aucun bond au moment où la carte apparaît (pas de décalage de mise en
     * page, donc pas de lecture perdue).
     */
    width: 100%;
    height: clamp(20rem, 45vw, 30rem);
    overflow: hidden;
    border-radius: var(--radius-md, 8px);
    background-color: var(--color-bg-warm, #F6EAD4);
    border: 1px solid rgba(4, 59, 88, 0.12);
}

.rc-block--warm .rc-carte__cadre {
    background-color: var(--color-bg-light, #FAFAF7);
}

.rc-carte__invite {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm, 1rem);
    padding: var(--space-md, 1.5rem);
    text-align: center;
}

.rc-carte__adresse {
    display: flex;
    flex-direction: column;
    margin: 0;
    color: var(--color-primary, #043B58);
    font-family: var(--font-heading, Georgia, serif);
    font-size: clamp(1.125rem, 2.5vw, 1.5rem);
    font-style: normal;
    line-height: 1.35;
}

.rc-carte__mention {
    max-width: 32rem;
    margin: 0;
    color: var(--color-text-muted, #666);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.rc-carte__cadre iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.rc-carte__itineraire {
    margin-top: var(--space-sm, 1rem);
    text-align: center;
}

.rc-carte__itineraire .rc-link {
    color: var(--color-action, #CA4E24);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.rc-carte__itineraire .rc-link:hover,
.rc-carte__itineraire .rc-link:focus-visible {
    color: var(--color-primary, #043B58);
}

/* ==========================================================================
   Bloc restorcars/formulaire-contact
   --------------------------------------------------------------------------
   Contact Form 7 produit son propre balisage : on l'habille sans le réécrire,
   pour qu'une mise à jour du plugin ne casse rien.
   ========================================================================== */

.rc-formulaire__corps {
    max-width: 42rem;
}

.rc-formulaire__intro {
    max-width: 42rem;
    margin-bottom: var(--space-md, 1.5rem);
    color: var(--color-text-muted, #666);
}

.rc-formulaire .rc-form__ligne {
    margin-block: 0 var(--space-md, 1.5rem);
}

.rc-formulaire label {
    display: block;
    margin-bottom: var(--space-3xs, 0.25rem);
    color: var(--color-primary, #043B58);
    font-weight: 600;
    font-size: 0.9375rem;
}

.rc-formulaire input[type="text"],
.rc-formulaire input[type="email"],
.rc-formulaire input[type="tel"],
.rc-formulaire select,
.rc-formulaire textarea {
    box-sizing: border-box;
    width: 100%;
    /* 3 rem : la cible tactile minimale confortable sur un téléphone */
    min-height: 3rem;
    padding: 0.625rem 0.875rem;
    border: 1px solid rgba(4, 59, 88, 0.28);
    border-radius: var(--radius-sm, 4px);
    background-color: #fff;
    color: var(--color-text, #1A1A1A);
    font-family: inherit;
    /* 1 rem : en dessous, iOS zoome automatiquement à la mise au point */
    font-size: 1rem;
    line-height: 1.5;
    transition: border-color var(--transition, 0.2s ease), box-shadow var(--transition, 0.2s ease);
}

.rc-formulaire textarea {
    min-height: 9rem;
    resize: vertical;
}

.rc-formulaire input:focus,
.rc-formulaire select:focus,
.rc-formulaire textarea:focus {
    border-color: var(--color-primary, #043B58);
    outline: 2px solid var(--color-accent, #EE5C2B);
    outline-offset: 1px;
}

.rc-form__requis {
    color: var(--color-action, #CA4E24);
}

.rc-formulaire .wpcf7-list-item {
    margin: 0;
}

.rc-formulaire .wpcf7-acceptance label {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    font-weight: 400;
    font-size: 0.875rem;
    color: var(--color-text, #1A1A1A);
    line-height: 1.5;
}

.rc-formulaire .wpcf7-acceptance input[type="checkbox"] {
    /* Aligné sur la première ligne de texte, pas sur le milieu du paragraphe */
    flex: 0 0 auto;
    margin-top: 0.2em;
    width: 1.125rem;
    height: 1.125rem;
    min-height: 0;
    accent-color: var(--color-action, #CA4E24);
}

.rc-formulaire .wpcf7-submit {
    display: inline-block;
    padding: var(--space-sm, 1rem) var(--space-lg, 2.5rem);
    min-height: 3rem;
    border: 0;
    border-radius: var(--radius-sm, 4px);
    background: var(--color-action, #CA4E24);
    color: #fff;
    font: inherit;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    transition: background-color var(--transition, 0.2s ease), transform var(--transition, 0.2s ease);
}

.rc-formulaire .wpcf7-submit:hover,
.rc-formulaire .wpcf7-submit:focus-visible {
    background: var(--color-action-survol, #A83814);
    transform: translateY(-1px);
}

.rc-formulaire .wpcf7-submit:focus-visible {
    outline: 3px solid var(--color-primary, #043B58);
    outline-offset: 2px;
}

/* Messages de Contact Form 7 — repris dans la palette du site */
.rc-formulaire .wpcf7-response-output {
    margin: var(--space-md, 1.5rem) 0 0;
    padding: var(--space-sm, 1rem);
    border-width: 0 0 0 4px;
    border-radius: var(--radius-sm, 4px);
    background-color: var(--color-bg-warm, #F6EAD4);
    font-size: 0.9375rem;
}

.rc-formulaire form.sent .wpcf7-response-output {
    border-left-color: #1E7B4F;
}

.rc-formulaire form.invalid .wpcf7-response-output,
.rc-formulaire form.failed .wpcf7-response-output,
.rc-formulaire form.spam .wpcf7-response-output {
    border-left-color: var(--color-red, #BD0926);
}

.rc-formulaire .wpcf7-not-valid-tip {
    margin-top: 0.25rem;
    color: var(--color-red, #BD0926);
    font-size: 0.8125rem;
    font-weight: 600;
}

.rc-formulaire input[aria-invalid="true"],
.rc-formulaire textarea[aria-invalid="true"] {
    border-color: var(--color-red, #BD0926);
}

/*
 * Le champ leurre anti-robot.
 *
 * Sorti du cadre plutôt que masqué par `display: none` : un robot un peu
 * dégourdi ignore ce qui est explicitement caché, alors qu'il remplit ce qui
 * ressemble à un champ ordinaire. Le lecteur d'écran ne le voit pas non plus,
 * grâce à l'attribut aria-hidden posé dans le balisage.
 */
.rc-form__piege {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Repli quand aucun formulaire n'est disponible */
.rc-formulaire__repli {
    margin: 0 0 var(--space-xs, 0.625rem);
    color: var(--color-text-muted, #666);
}

.rc-formulaire__repli-liens {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md, 1.5rem);
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
}