/* Page Contact : modèle de la page Contact du premier site TDB, dans l'identité de Pornic. Préfixe co-. */

/* 1. Haut de page court, sans photo. */
.co-hero{position:relative;overflow:clip;background:#fffefa;padding:84px 0 88px;text-align:center}
.co-hero-in{position:relative;max-width:820px}
.co-surtitre{margin:0 0 18px;color:#727773;font-size:22px;font-weight:500}
.co-hero h1{margin:0;color:var(--ink);font-size:60px;font-weight:850;line-height:1.05;letter-spacing:-.045em}
.co-hero-sous{max-width:56ch;margin:24px auto 0;font-size:19.5px;line-height:1.55}
.co-hero-wave{position:absolute;left:-90px;bottom:-10px;width:120px;height:44px;color:var(--fluo)}
.co-stamp{position:absolute;right:-60px;top:6px;bottom:auto;left:auto;transform:rotate(4deg)}

/* 2-3. Le formulaire et les coordonnées. */
.co-principal{background:var(--soft);padding:90px 0 110px}
.co-grille{display:grid;grid-template-columns:1.25fr 1fr;gap:40px;align-items:center;padding:0 10px 10px 0}
.co-h2{margin:0 0 18px!important;font-size:30px!important;font-weight:850;line-height:1.25;letter-spacing:-.03em}
.co-form-carte{padding:36px 36px 32px;border-radius:12px;background:var(--paper);color:var(--night);box-shadow:10px 10px 0 var(--night)}
.co-form-intro{margin:0 0 22px;font-size:15.5px!important;color:#4e534f}
.co-oblig{color:var(--night);font-weight:900}
.co-abri{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.co-duo{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.co-champ{display:flex;flex-direction:column;gap:6px;margin:0 0 18px}
.co-champ label{font-size:14px;font-weight:800}
.co-champ input,.co-champ select,.co-champ textarea{font:inherit;font-size:16px;color:var(--night);padding:12px 14px;border:2px solid transparent;border-radius:10px;background:var(--soft);transition:border-color .18s,background .18s}
.co-champ textarea{resize:vertical;min-height:120px}
.co-champ select{appearance:none;-webkit-appearance:none;padding-right:42px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23202322' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px 16px}
/* Le champ actif se signale par un liseré fluo, jamais par un cadre noir. */
.co-champ input:focus,.co-champ select:focus,.co-champ textarea:focus{outline:none;border-color:var(--fluo);background-color:#fff;box-shadow:0 0 0 4px #d9ff2559}
.co-champ input:user-invalid,.co-champ textarea:user-invalid{border-color:#b3261e}
.co-dropin{margin:-6px 0 18px!important;padding:12px 14px;border-radius:10px;background:var(--sky);font-size:15px!important}
.co-accord{display:flex;align-items:flex-start;gap:11px;margin:4px 0 22px}
.co-accord input{flex:none;width:19px;height:19px;margin-top:3px;accent-color:var(--night)}
.co-accord label{font-size:14.5px;line-height:1.45;color:#4e534f}
.co-envoi{width:100%;justify-content:center;cursor:pointer}
.co-envoi[disabled]{opacity:.55;cursor:not-allowed}
.co-etat{min-height:1.4em;margin:14px 0 0;font-size:15px!important;font-weight:750}
.co-etat[data-ton=refus]{color:#b3261e}

.co-infos{display:flex;flex-direction:column;gap:12px}
/* Les coordonnées réunies dans une seule carte, un séparateur fin entre deux lignes. */
.co-carte-infos{display:flex;flex-direction:column;padding:8px 10px;border-radius:12px;background:var(--paper);box-shadow:6px 6px 0 var(--night)}
.co-info{display:flex;align-items:center;gap:14px;padding:14px 10px;border-radius:8px;color:inherit;text-decoration:none;transition:background .2s}
.co-info + .co-info{border-top:1px solid #2023221f;border-radius:0}
a.co-info:hover{background:var(--soft)}
a.co-info:focus-visible{outline:3px solid var(--night);outline-offset:3px}
.co-ic{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--fluo)}
.co-ic svg{width:21px;height:21px;fill:none;stroke:var(--night);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.co-info-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.co-info-txt b{font-size:17px;font-weight:850;overflow-wrap:anywhere}
.co-info-txt span{font-size:14.5px;color:#4e534f}
.co-info-txt em{margin-top:4px;font-style:normal;font-size:13.5px;font-weight:850;text-decoration:underline;text-decoration-color:var(--fluo);text-decoration-thickness:3px;text-underline-offset:3px}
.co-map{overflow:clip;border-radius:12px;box-shadow:6px 6px 0 var(--night)}
.co-map :is(iframe,:where(.c-carte-plan)){display:block;width:100%;height:260px;border:0}
.co-essai{margin-top:8px;padding:24px 22px;border-radius:12px;background:var(--night);color:var(--paper)}
.co-essai-titre{margin:0 0 8px!important;font-size:19px!important;font-weight:850}
.co-essai p{margin:0;font-size:15.5px;line-height:1.5}
.co-essai .v-cta{margin-top:18px;width:100%;justify-content:center}

@media(max-width:900px){
  .co-grille{grid-template-columns:minmax(0,1fr)}
  .co-hero h1{font-size:40px;line-height:1.2}   /* interligne des titres du haut de page sur téléphone (Virginie, 19/10) */
  .co-stamp,.co-hero-wave{display:none}
}
@media(max-width:640px){.co-duo{grid-template-columns:1fr}.co-form-carte{padding:28px 22px 24px}}

/* Version téléphone (08/10) : « Itinéraire » et compagnie en 14 px. */
@media(max-width:1023px){.co-info-txt em{font-size:14px}.co-accord label{padding:6px 0;min-height:44px;box-sizing:border-box}}   /* la case d'accord et son texte à 44 px au doigt */