/* assurance-decennale-lyon.fr : ce qui n'appartient qu'à ce site. Le reste est dans reseau-local/commun/css/reseau.css. */

/* ============ Particuliers ============ */
.enseigne__liens a[aria-current="page"] { color: var(--ivoire); }

/* le choix de l'agence, dans l'entrée */
.choix-agence { margin-top: 36px; }
.choix-agence legend { font-size: var(--t-petit); color: var(--doux); margin-bottom: 10px; }
.choix-agence__aide { margin-top: 12px; font-size: var(--t-petit); color: var(--doux); max-width: 52ch; }
.choix-agence__aide b { color: var(--ivoire); font-weight: 500; }

/* le devis en ligne : trois plaques */
.en-ligne { background: var(--nuit-2); padding-block: var(--section); }
.en-ligne h2 { grid-column: 1 / span 6; }
.en-ligne__intro { grid-column: 8 / span 5; align-self: end; color: var(--doux); }
.tarifs { grid-column: 1 / -1; margin-top: 56px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g); }
.tarif { display: flex; flex-direction: column; background: var(--nuit); box-shadow: inset 0 0 0 1px var(--filet); padding: clamp(26px, 2.6vw, 40px); }
.tarif h3 { font: 400 var(--t-lead)/1.15 var(--serif); }
.tarif > p { margin-top: 12px; color: var(--doux); }
.tarif dl { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--filet); }
.tarif dt { font-size: var(--t-petit); font-weight: 500; color: var(--champagne); margin-bottom: 6px; }
.tarif dd { font-size: var(--t-petit); color: var(--doux); }
.tarif__actions { margin-top: auto; padding-top: 30px; display: grid; gap: 16px; justify-items: start; }
.tarif .bouton { width: 100%; padding: 0 20px; }
.tarif .lien { font-size: var(--t-petit); }
.en-ligne__note { grid-column: 1 / -1; margin-top: 28px; font-size: var(--t-petit); color: var(--doux); max-width: 76ch; }

/* tout le reste, sur rappel : quatre familles (styles des familles dans la feuille commune) */
.sur-rappel { padding-block: var(--section); }
.sur-rappel h2 { grid-column: 1 / span 6; }
.sur-rappel__intro { grid-column: 8 / span 5; align-self: end; color: var(--doux); }

@media (max-width: 980px) {
  .en-ligne h2, .en-ligne__intro, .sur-rappel h2, .sur-rappel__intro { grid-column: 1 / -1; }
  .en-ligne__intro, .sur-rappel__intro { margin-top: 18px; }
  .tarifs { grid-template-columns: 1fr; max-width: 560px; }
}

/* pages métier : un lien secondaire sous le bouton du bloc « Votre prévoyance et votre santé » (ex. « Votre retraite ») */
.decoupe__tete .bouton ~ .lien { display: flex; width: max-content; margin-top: 14px; }
.decoupe__tete .bouton + .lien { margin-top: 22px; }

/* le bandeau qui suit le défilement, sur téléphone : le nom du site, plus long qu'« Assurance Lyon », passe sur deux lignes
   pour laisser le bouton « Être rappelé » entier */
@media (max-width: 480px) {
  .barre__nom { min-width: 0; white-space: normal; font-size: 1.1rem; line-height: 1.1; }
  .barre .bouton { padding: 0 14px; }
}

/* =====================================================================================================================
   Thème « chantier » (14 novembre 2026, à la demande du cabinet : « moins AssurMontres, plus aéré, plus actuel »)
   Fond blanc comme un ciel clair, encre ardoise, un seul orange de signalisation pour les actions, titres en Archivo.
   Tout ce bloc ne vaut que pour ce site : assurance-lyon.com garde le noir et le champagne de reseau.css.
   Les noms des jetons restent ceux de la feuille commune (--nuit = le fond, --ivoire = l'encre, --champagne = l'accent).
   ===================================================================================================================== */
@font-face { font-family: "Archivo"; font-weight: 100 900; font-stretch: 100% 125%; font-display: swap; src: url("../fonts/archivo-latin.woff2") format("woff2"); }

:root {
  --nuit: #ffffff;          /* le fond */
  --nuit-2: #f1f4f6;        /* une section sur deux : le béton clair */
  --nuit-3: #e5ebee;
  --nuit-4: #d3dce1;
  --profond: #13212b;       /* l'ardoise : le pied de page et la bande « En bref » */
  --ivoire: #13212b;        /* l'encre */
  --doux: #4a5a65;          /* le texte secondaire */
  --champagne: #c2410c;     /* l'orange de signalisation : boutons, liens, repères */
  --champagne-2: #9a3412;
  --filet: rgba(19, 33, 43, 0.14);
  --ouvert: #2f7d3a;
  --ferme: #6b7782;
  --serif: "Archivo", "Segoe UI", system-ui, sans-serif;
  --t-titre: clamp(2rem, 1.25rem + 2.4vw, 3.25rem);
}
html { color-scheme: light; scrollbar-color: var(--nuit-4) var(--nuit); }
::selection { background: #fed7aa; color: var(--ivoire); }

/* les titres : Archivo gras et un peu large, comme un panneau de chantier */
.entree h1, .titre-section, .etape__titre, .besoin__nom, .besoins__tete h2, .dirigeant h2, .presentation h2, .demarche h2,
.agences h2, .questions h2, .dernier h2 { font-weight: 750; font-stretch: 110%; letter-spacing: -0.025em; line-height: 1.04; }
.colonnes h3, .famille h3, .agence h3, .secteur h3, .encadre h3, .exemple h3, .fiche h3, .tarif h3, .legal__texte h2,
.questions summary, .decoupe__liste b, .dirigeant__liste b, .demarche li b, .etapes li, .presentation__texte p.lead {
  font-weight: 650; font-stretch: 104%; letter-spacing: -0.01em; }
.agence__tel, .dernier__tete .tels a, .devis__cote .tels a { font-weight: 700; font-stretch: 104%; }
.marque { font-weight: 750; font-stretch: 108%; letter-spacing: -0.02em; color: var(--ivoire); }
.marque .logo { color: var(--champagne); stroke-width: 2; }

/* les actions : un rectangle orange plein, du texte blanc */
.bouton { color: #fff; font-weight: 500; }
.bouton:hover { background: var(--champagne-2); }
.puce span { box-shadow: inset 0 0 0 1.5px var(--nuit-4); }
.puce input:hover + span, .puce--lien:hover span { box-shadow: inset 0 0 0 1.5px var(--doux); }
.puce input:checked + span { color: #fff; }
.puce input:checked + span::before { background: #fff; }

/* les champs : blancs, bordés, lisibles en plein soleil */
.appel input[type="tel"], .formulaire input[type="tel"], .formulaire input[type="text"], .formulaire input[type="email"], .formulaire select, .formulaire textarea {
  background: #fff; color: var(--ivoire); box-shadow: inset 0 0 0 1.5px var(--nuit-4); }
.appel input:focus, .formulaire input:focus, .formulaire select:focus, .formulaire textarea:focus { box-shadow: inset 0 0 0 2px var(--champagne); outline: none; }
.appel input::placeholder, .formulaire input::placeholder, .formulaire textarea::placeholder { color: #6b7782; }
.accord input::after { border-color: #fff; }

/* l'en-tête et le bandeau qui suit le défilement : blancs */
.enseigne { background: #fff; }
.enseigne__liens a { color: var(--ivoire); font-weight: 500; }
.enseigne__liens a:hover { color: var(--champagne); }
.barre { background: #fff; color: var(--ivoire); box-shadow: 0 6px 22px rgba(19, 33, 43, 0.10); }

/* l'entrée de l'accueil : le texte à gauche, la façade sous échafaudage à droite, jusqu'au bord de l'écran */
.entree:has(.entree__photo) { padding-top: clamp(24px, 3vw, 48px); padding-bottom: 0; align-items: stretch; }
.entree:has(.entree__photo) .entree__texte { grid-column: 1 / span 7; align-self: center; padding-block: clamp(24px, 4vw, 72px); padding-right: clamp(0px, 2vw, 32px); }
.entree:has(.entree__photo) h1 { font-size: clamp(2.375rem, 1.2rem + 2.8vw, 4rem); max-width: 20ch; }
.entree__phrase { color: var(--doux); }
.entree__photo { grid-column: 8 / -1; margin: 0 calc(-1 * var(--marge)) 0 0; position: relative; }
.entree__photo img { width: 100%; height: 100%; min-height: 520px; max-height: 720px; object-fit: cover; object-position: 50% 30%; }
.entree__photo figcaption { position: absolute; left: 16px; bottom: 14px; padding: 4px 10px; background: rgba(19, 33, 43, 0.72); color: #fff; font-size: var(--t-petit); }

/* les métiers en un clic : des étiquettes qu'on touche du pouce */
.metiers-rapides { margin-top: clamp(36px, 4vw, 56px); }
.metiers-rapides h2 { font: 600 var(--t-petit)/1.4 var(--sans); color: var(--ivoire); }
.metiers-rapides ul { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.metiers-rapides a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; background: var(--nuit-2); color: var(--ivoire);
  font-weight: 500; text-decoration: none; transition: background-color 180ms, color 180ms, transform 180ms var(--sortie); }
.metiers-rapides a:hover { background: var(--champagne); color: #fff; }
.metiers-rapides a:active { transform: translateY(1px); }
.metiers-rapides li:last-child a { background: transparent; color: var(--champagne); text-decoration: underline; text-underline-offset: 0.25em; }
.metiers-rapides li:last-child a:hover { color: var(--champagne-2); }

/* « En bref » de l'accueil : une bande d'ardoise sur toute la largeur, quatre repères côte à côte */
.essentiel--bande { grid-column: auto; align-self: auto; margin-top: 0 !important; max-width: none !important; background: var(--profond); color: #fff; box-shadow: none; padding: clamp(48px, 6vw, 88px) var(--marge); clip-path: none !important; animation: none !important; }
.essentiel--bande h2 { grid-column: 1 / -1; font: 750 var(--t-lead)/1.1 var(--serif); font-stretch: 110%; color: #fff; }
.essentiel--bande dl { grid-column: 1 / -1; margin-top: 28px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px var(--g); }
.essentiel--bande dt { color: #fdba74; font-size: var(--t-texte); font-weight: 600; }
.essentiel--bande dd { color: #d5dde2; font-size: var(--t-texte); }

/* la vue sur Lyon, entre les explications et les agences : une respiration à pleine largeur */
.bande-photo { margin: 0; }
.bande-photo img { width: 100%; height: clamp(220px, 34vw, 520px); object-fit: cover; object-position: 50% 40%; }

/* les repères de la feuille commune, plus francs */
.colonnes > * { border-top-width: 3px; }
.questions summary:hover { color: var(--champagne); }

/* le pied de page : l'ardoise, texte clair */
.pied { background: var(--profond); color: #b8c4cb; }
.pied .marque { color: #fff; }
.pied .marque .logo { color: #fb923c; }
.pied__marque p { color: #b8c4cb; }
.pied__cols h3 { color: #fff; }
.pied__cols a:hover { color: #fff; }
.pied__legal { border-top-color: rgba(255, 255, 255, 0.14); }
.pied__legal a { color: #fff; }

/* sur téléphone : les trois actions toujours à portée de pouce, en bas de l'écran ; le bandeau du haut s'efface */
.actions-mobile { display: none; }
@media (max-width: 760px) {
  .actions-mobile { position: fixed; inset: auto 0 0; z-index: 45; display: grid; grid-template-columns: 1fr 1fr 1.3fr;
    background: #fff; box-shadow: 0 -6px 22px rgba(19, 33, 43, 0.12); padding-bottom: env(safe-area-inset-bottom); }
  .actions-mobile a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 60px;
    color: var(--ivoire); font-size: var(--t-petit); font-weight: 500; text-decoration: none; }
  .actions-mobile a .ico { width: 20px; height: 20px; color: var(--champagne); }
  .actions-mobile a:active { background: var(--nuit-2); }
  .actions-mobile .actions-mobile__principal { background: var(--champagne); color: #fff; }
  .actions-mobile .actions-mobile__principal .ico { color: #fff; }
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
  .barre { display: none; }

  .entree:has(.entree__photo) .entree__texte { grid-column: 1 / -1; padding-block: 8px 32px; }
  .entree__photo { grid-column: 1 / -1; margin: 0 calc(-1 * var(--marge)); }
  .entree__photo img { min-height: 0; height: 62svh; max-height: 560px; }
  .essentiel--bande dl { grid-template-columns: 1fr; gap: 22px; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .essentiel--bande dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* plus aéré : les filets fins de la feuille commune deviennent des plaques claires ou de l'espace */
:root { --tuile: var(--nuit-2); }
.section--2, .agences, .dernier { --tuile: #fff; }
.decoupe__liste li, .decoupe__liste li:last-child, .questions details, .questions details:last-child, .voisins li, .produit,
.dirigeant__liste li, .dirigeant__liste li:last-child, .etapes li, .etapes li:last-child, .pieces li, .besoin + .besoin,
.fiche__en-ligne, .secteur, .legal__texte > section + section, .legal__texte .credits li + li, .presentation__faits li { border: 0; }
.decoupe__liste { display: grid; gap: 8px; }
.decoupe__liste li { background: var(--tuile); padding: 22px clamp(18px, 2vw, 28px); }
.questions__liste { display: grid; gap: 8px; }
.questions details { background: var(--tuile); padding: 0 clamp(18px, 2vw, 28px); }
.voisins { row-gap: 8px; }
.produit, .voisins .produit { background: var(--tuile); padding: 16px 18px; font-weight: 500; }
.produit:hover { color: var(--champagne); }
.pieces { row-gap: 4px; }
.pieces li { padding-block: 10px; }
.pieces li::before { top: calc(10px + 0.72em); }
.etapes li { padding-block: 10px; }

/* les pages métiers : la photographie de la famille, en bandeau sous l'entrée */
.bande-photo { position: relative; }
.bande-photo--metier img { height: clamp(200px, 26vw, 380px); object-position: 50% 45%; }
.bande-photo figcaption { position: absolute; left: var(--marge); bottom: 14px; padding: 4px 10px; background: rgba(19, 33, 43, 0.72); color: #fff; font-size: var(--t-petit); }

/* sous « En bref » : les conditions varient selon l'offre proposée */
.essentiel__note { grid-column: 1 / -1; margin-top: 32px; max-width: 72ch; color: #d5dde2; font-size: var(--t-petit); }

/* le guide : les articles en plaques cliquables, la date en petit, le titre en Archivo */
.articles { grid-column: 1 / -1; margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.article { display: grid; align-content: start; gap: 8px; height: 100%; padding: 22px clamp(18px, 2vw, 26px); background: var(--tuile); color: var(--ivoire); text-decoration: none;
  transition: background-color 200ms, transform 200ms var(--sortie); }
.article:hover { background: var(--nuit-3); }
.article:active { transform: translateY(1px); }
.article__date { font-size: var(--t-petit); color: var(--doux); }
.article b { font: 700 var(--t-lead)/1.15 var(--serif); font-stretch: 104%; letter-spacing: -0.01em; }
.article:hover b { color: var(--champagne); }
.article > span:last-child { color: var(--doux); }
.guide-accueil .intro a { color: var(--champagne); }
@media (max-width: 980px) { .articles { grid-template-columns: 1fr; } }

/* Guide (14 novembre 2026) : sous le titre de chaque article, le rappel que les règles citées sont celles de l'offre prise en exemple */
.entree__note { margin-top: 20px; max-width: 60ch; font-size: var(--t-petit); color: var(--doux); }