/* ════════════════════════════════
   CONTACT - inspiré du style Aperitiu
   Hero orange + carte polaroid pour le formulaire + cartes infos
════════════════════════════════ */

.co-page {
    --co-cream:     #f3e9d7;
    --co-cream-2:   #fbf4e9;
    --co-cream-3:   #f1ead8;
    --co-white-2:   #fffdf8;
    --co-orange:    #ffa200;
    --co-orange-2:  #f3a63c;
    --co-red:       #e85a28;
    --co-dark:      #242323;
    --co-grey:      #dbdbdb;
    --co-error:     #c0392b;

    --co-font-display: 'Erica One', 'Anton', Impact, sans-serif;
    --co-font-script:  'Darumadrop One', 'Caveat', cursive;
    --co-font-body:    'DM Sans', sans-serif;
    --co-font-ui:      'Poppins', system-ui, sans-serif;

    --co-max:   1440px;
    --co-pad:   100px;

    background: var(--co-cream);
    overflow-x: clip;
}

.co-page main { padding-top: 0; }
body.co-page > .blob { display: none !important; }

.co-page h1, .co-page h2, .co-page h3 { margin: 0; }
.co-page img { display: block; max-width: 100%; }

/* ════════════════════════════════
   1. HERO
════════════════════════════════ */
.co-hero {
    position: relative;
    min-height: 540px;
    background-color: var(--co-red);
    background-image: url('/images/home/union3.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    isolation: isolate;
    overflow: visible;
}

.co-hero-mascot {
    position: absolute;
    top: 124px;
    left: calc(50% - 720px + 14px);
    width: 117px;
    height: 103px;
    z-index: 5;
    pointer-events: none;
    transform: scaleY(-1) rotate(174.51deg);
}
.co-hero-mascot img { width: 100%; height: 100%; object-fit: contain; }

.co-hero-inner {
    position: relative;
    z-index: 2;
    max-width: var(--co-max);
    margin: 0 auto;
    padding: 220px var(--co-pad) 100px;
    box-sizing: border-box;
    color: #fff;
    text-align: center;
}

.co-hero-title {
    font-family: var(--co-font-display);
    font-size: clamp(80px, 7.5vw, 122px);
    font-weight: 400;
    color: #fff;
    text-transform: uppercase;
    line-height: 1.05;
    letter-spacing: -2px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
}

.co-hero-title > span { display: inline-block; }

/* Stamp badge - même technique que "ramène" sur la home (2 SVG superposés) */
.co-hero-title-stamp {
    display: inline-block;
    position: relative;
    padding: 12px 24px 18px;
    line-height: 1;
    background-image: url('/images/home/rect3464584.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.co-hero-desc {
    margin: 36px auto 0;
    font-family: var(--co-font-body);
    font-size: 20px;
    line-height: 1.55;
    color: #fff;
    max-width: 720px;
}

/* Bande crénelée séparateur hero / formulaire */
.co-hero-dots {
    position: absolute;
    bottom: -17px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--co-max);
    padding: 0 var(--co-pad);
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    z-index: 3;
    pointer-events: none;
}

.co-hero-dots span {
    width: 34px;
    height: 34px;
    background: var(--co-orange-2);
    flex: 0 0 34px;
}

/* ════════════════════════════════
   2. SECTION FORMULAIRE
════════════════════════════════ */
.co-form-section {
    padding: 80px var(--co-pad) 120px;
    background: var(--co-cream);
}

/* Carte "polaroid" autour du form - 18px de bordure blanche + shadow */
.co-form-card {
    max-width: 760px;
    margin: 0 auto;
    background: var(--co-white-2);
    border: 18px solid #fff;
    box-sizing: border-box;
    padding: 50px 50px 44px;
    box-shadow:
        2px 9px 21px rgba(0, 0, 0, .1),
        7px 38px 39px rgba(0, 0, 0, .08),
        16px 85px 52px rgba(0, 0, 0, .04);
    position: relative;
}

.co-form-header {
    text-align: center;
    margin-bottom: 36px;
}

.co-form-title {
    font-family: var(--co-font-script);
    font-size: 44px;
    color: var(--co-dark);
    line-height: 1.1;
    margin-bottom: 6px;
}

.co-form-subtitle {
    font-family: var(--co-font-body);
    font-size: 15px;
    color: rgba(36, 35, 35, .65);
    margin: 0;
}

/* ─────────  Champs  ───────── */
.co-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    margin-bottom: 22px;
}

.co-field {
    display: flex;
    flex-direction: column;
    margin-bottom: 22px;
}

.co-form-row .co-field { margin-bottom: 0; }

.co-field label {
    font-family: var(--co-font-script);
    font-size: 20px;
    color: var(--co-dark);
    margin-bottom: 6px;
    display: block;
}

.co-required {
    color: var(--co-red);
    font-weight: 400;
}

/* Inputs / textarea / select - tous au même style */
.co-form-card input[type="text"],
.co-form-card input[type="email"],
.co-form-card input[type="tel"],
.co-form-card input[type="url"],
.co-form-card textarea {
    width: 100%;
    background: var(--co-cream-2);
    border: 1.5px solid transparent;
    border-radius: 14px;
    padding: 14px 18px;
    font-family: var(--co-font-body);
    font-size: 16px;
    color: var(--co-dark);
    outline: none;
    box-sizing: border-box;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.co-form-card textarea {
    min-height: 140px;
    resize: vertical;
    line-height: 1.5;
}

.co-form-card input::placeholder,
.co-form-card textarea::placeholder {
    color: rgba(36, 35, 35, .4);
}

.co-form-card input:hover,
.co-form-card textarea:hover {
    background: #fff;
}

.co-form-card input:focus,
.co-form-card textarea:focus {
    background: #fff;
    border-color: var(--co-orange-2);
    box-shadow: 0 0 0 4px rgba(243, 166, 60, .15);
}

/* État erreur (Symfony ajoute les classes / le markup d'erreur) */
.co-field-error {
    color: var(--co-error);
    font-family: var(--co-font-body);
    font-size: 13px;
    line-height: 1.4;
    min-height: 0;
}

.co-field-error:not(:empty) {
    margin-bottom: 6px;
}

.co-field-error ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ─────────  CTA submit  ───────── */
.co-cta {
    margin-top: 32px;
    position: relative;
    display: inline-block;
}

.co-cta::after {
    content: '';
    position: absolute;
    inset: 8px -6px -8px 6px;
    border-radius: 90px;
    background: var(--co-cream-3);
    z-index: 0;
}

.co-btn-primary {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--co-orange-2);
    color: #fff;
    border: 0;
    text-decoration: none;
    padding: 18px 38px;
    border-radius: 80px;
    font-family: var(--co-font-body);
    font-weight: 600;
    font-size: 18px;
    line-height: 1.5;
    min-width: 260px;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
    z-index: 1;
}

.co-btn-primary:hover {
    background: var(--co-red);
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0 0 rgba(0, 0, 0, .15);
}

.co-btn-primary svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.co-btn-primary.is-loading .btn-icon-save { display: none; }
.co-btn-primary.is-loading .btn-icon-spin {
    display: block !important;
    animation: co-spin 1s linear infinite;
}

@keyframes co-spin {
    to { transform: rotate(360deg); }
}

/* ────────────  Cartes infos (adresse / horaires / téléphone)  ──────────── */
.co-info-row {
    max-width: 1160px;
    margin: 60px auto 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.co-info-card {
    background: var(--co-white-2);
    border: 14px solid #fff;
    box-sizing: border-box;
    padding: 28px 24px 24px;
    text-align: center;
    box-shadow:
        2px 6px 16px rgba(0, 0, 0, .08),
        5px 24px 32px rgba(0, 0, 0, .06);
}

.co-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--co-red);
    color: #fff;
    margin-bottom: 14px;
}

.co-info-icon svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.co-info-title {
    font-family: var(--co-font-script);
    font-size: 26px;
    color: var(--co-dark);
    margin-bottom: 6px;
}

.co-info-text {
    font-family: var(--co-font-body);
    font-size: 16px;
    color: rgba(36, 35, 35, .8);
    line-height: 1.5;
    margin: 0;
}

.co-info-text a {
    color: var(--co-red);
    text-decoration: none;
    transition: opacity .15s ease;
}

.co-info-text a:hover { opacity: .75; }

/* ────────────  Responsive  ──────────── */
@media (max-width: 1440px) {
    .co-page { --co-pad: 60px; }
    .co-hero-mascot { left: 30px; }
}

@media (max-width: 760px) {
    /* Latérales resserrées sur tablette/mobile : sans ça la carte papier se
       retrouve à ~250px sur un viewport de 370px et le formulaire devient
       inutilisable. */
    .co-page { --co-pad: 22px; }
    .co-form-card { padding: 36px 22px 32px; }
    .co-form-row { grid-template-columns: 1fr; gap: 0; }
    .co-info-row { grid-template-columns: 1fr; }
    .co-hero-inner { padding: 180px var(--co-pad) 80px; }
    .co-hero-title { font-size: 56px; flex-direction: column; gap: 8px; letter-spacing: -1px; }
    .co-hero-title-stamp { padding: 8px 18px 14px; }
    .co-hero-desc { font-size: 17px; margin-top: 28px; }

    /* Titre du form ("Écrivez-nous") : à 44px en Darumadrop One il se casse
       en deux lignes "Écrivez-/nous" sur petits écrans - on resserre. */
    .co-form-title { font-size: 36px; }
    .co-form-header { margin-bottom: 28px; }

    /* Labels Darumadrop à 20px : sur mobile ils mangent la moitié de la
       largeur visible, on les remet à une taille raisonnable. */
    .co-field label { font-size: 17px; }

    /* Hauteur tactile + 16px de font-size pour bloquer le zoom auto iOS au
       focus de l'input. */
    .co-form-card input[type="text"],
    .co-form-card input[type="email"],
    .co-form-card input[type="tel"],
    .co-form-card input[type="url"],
    .co-form-card textarea {
        padding: 16px 16px;
        font-size: 16px;
        border-radius: 12px;
    }

    /* Le bouton submit a un min-width: 260px sur desktop, ce qui le fait
       déborder de la carte sur viewport < 360px. On laisse le bouton prendre
       toute la largeur disponible et on ramène l'ombre cream-3 au ras pour
       qu'elle ne sorte plus du conteneur. */
    .co-cta { display: block; }
    .co-cta::after { inset: 6px -4px -6px 4px; }
    .co-btn-primary {
        min-width: 0;
        width: 100%;
        box-sizing: border-box;
        padding: 16px 24px;
        font-size: 16px;
    }
}

@media (max-width: 420px) {
    /* Très petits viewports (iPhone SE, vieux Android) : le mot QUESTION en
       Erica One letter-spacing négatif déborde encore à 56px. On descend. */
    .co-hero-title { font-size: 46px; }
    .co-form-title { font-size: 32px; }
}