/* Cholet Cuisine : feuille des composants.
   Toutes les couleurs, ombres, rayons et espacements viennent des jetons (tokens.json).
   La typographie (Rubik, tailles, graisses) est celle relevée sur cuisine-orleans.fr le 09/10/2026 : elle ne change pas.
   Mise au goût du jour du 09/10/2026 : images en grand, boutons d'équerre, plus de pavés blancs, version téléphone. */

.cc, .cc *, .cc *::before, .cc *::after { box-sizing: border-box; }
.cc { margin: 0; font-family: var(--font-rubik); font-size: 14px; line-height: 23.8px; font-weight: 400; color: var(--texte); background: var(--fond); -webkit-font-smoothing: antialiased; }
/* Remises à zéro en :where() : elles ne pèsent rien face aux classes des composants. */
:where(.cc) :where(img) { display: block; max-width: 100%; }
:where(.cc) :where(a) { color: inherit; text-decoration: none; }
:where(.cc) :where(h1, h2, h3, h4, p, ul, ol, figure, blockquote) { margin: 0; padding: 0; }
:where(.cc) :where(h1, h2, h3, h4) { font-weight: 400; }
:where(.cc) :where(ul, ol) { list-style: none; }
.cc :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.cc-conteneur { width: 100%; max-width: 1260px; margin-inline: auto; padding-inline: var(--espace-5); }
.cc-section { padding: var(--espace-9) 0 var(--espace-8); background: var(--fond); }
.cc-section--douce { background: var(--fond-doux); }
.cc-section--claire { background: var(--fond-clair); }
.cc-section--contraste { background: var(--contraste); color: var(--texte-sur-contraste); }
.cc-section--bande { background: var(--accent-bande); color: var(--texte-sur-sombre); padding: 80px 0; }
.cc-grille { display: grid; gap: var(--espace-5); }
.cc-grille--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cc-grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cc-grille--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cc-rangee { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-3); }

/* Texte */
.cc-surtitre { display: flex; align-items: center; gap: var(--espace-4); font-size: 13.02px; line-height: 18.6px; letter-spacing: 1px; text-transform: uppercase; color: var(--accent); margin-bottom: var(--espace-3); }
.cc-surtitre::before { content: ""; flex: none; width: 52px; height: 1px; background: currentColor; opacity: 0.5; }
.cc-surtitre--nu::before { display: none; }
.cc-surtitre--centre { justify-content: center; }
.cc-surtitre--sur-sombre { color: var(--discret-sur-sombre); }
.cc-section--contraste .cc-surtitre { color: var(--texte-sur-contraste); }
.cc-titre-hero { font-size: 56px; line-height: 61.6px; font-weight: 500; letter-spacing: -3px; color: var(--titre-sur-sombre); }
.cc-titre-hero em { display: block; font-weight: 300; font-style: italic; }
.cc-titre-page { font-size: 42px; line-height: 46.2px; font-weight: 500; letter-spacing: -0.6px; color: var(--titre-sur-sombre); }
.cc-titre-section { font-size: 35px; line-height: 38.5px; font-weight: 500; letter-spacing: -1.2px; color: var(--titre); text-wrap: balance; }
.cc-titre-section em, .cc-titre-bloc em { font-style: italic; color: var(--accent); }
.cc-titre-article { font-size: 26px; line-height: 31.2px; font-weight: 500; letter-spacing: -1.2px; color: var(--titre); }
.cc-titre-bloc { font-size: 21.99px; line-height: 26.39px; font-weight: 400; letter-spacing: -0.3px; color: var(--titre); }
.cc-titre-carte { font-size: 18.47px; line-height: 22.17px; font-weight: 400; letter-spacing: -0.3px; color: var(--titre); }
.cc-section--contraste .cc-titre-section, .cc-section--contraste .cc-titre-bloc, .cc-section--contraste .cc-titre-carte { color: var(--titre-sur-contraste); }
.cc-section--contraste .cc-titre-section em { color: inherit; }
.cc-section--bande .cc-titre-section { color: var(--titre-sur-sombre); }
.cc-section--bande .cc-titre-section em { color: inherit; }
.cc-corps { font-size: 14px; line-height: 23.8px; color: var(--texte); }
.cc-corps--article { font-size: 15.4px; line-height: 26.18px; }
.cc-corps strong { font-weight: 500; color: var(--titre); }
.cc-petit { font-size: 12.04px; line-height: 20.47px; letter-spacing: 0.5px; }
.cc-liste-tirets li { position: relative; padding-left: var(--espace-5); }
.cc-liste-tirets li::before { content: ""; position: absolute; left: 0; top: 0.85em; width: 18px; height: 1px; background: currentColor; opacity: 0.6; }

/* Boutons et liens : d'équerre, filet fin, survol par inversion */
.cc-btn { display: inline-flex; align-items: center; gap: var(--espace-3); font: inherit; font-size: 14px; line-height: 20px; letter-spacing: 0.3px; padding: 16px 28px; border: 1px solid var(--accent); border-radius: var(--rayon-bouton); background: var(--accent); color: var(--sur-accent); cursor: pointer; white-space: nowrap; transition: background-color var(--duree-courte), color var(--duree-courte), border-color var(--duree-courte); }
.cc-btn:hover { background: transparent; color: var(--accent); }
.cc-btn--contour { background: transparent; border-color: var(--bord-bouton); color: var(--titre-sur-sombre); }
.cc-btn--contour:hover { background: var(--titre-sur-sombre); border-color: var(--titre-sur-sombre); color: var(--fond-entete); }
.cc-btn--petit { padding: 11px 20px; }
.cc-btn[disabled] { opacity: 0.5; cursor: default; }
.cc-section--contraste .cc-btn { background: var(--titre-sur-contraste); border-color: var(--titre-sur-contraste); color: var(--contraste); }
.cc-section--contraste .cc-btn:hover { background: transparent; color: var(--titre-sur-contraste); }
.cc-fleche { flex: none; width: 24px; height: 8px; }
.cc-lien { display: inline-flex; align-items: center; gap: var(--espace-2); font-size: 13.02px; line-height: 18.6px; letter-spacing: 0.3px; color: var(--texte-doux); transition: color var(--duree-courte), gap var(--duree-courte); }
.cc-lien:hover { color: var(--accent); gap: var(--espace-3); }
.cc-lien--accent { font-size: 14.32px; font-weight: 600; color: var(--accent); }

/* Bandeau d'information et en-tête */
.cc-bandeau { background: var(--accent-bande); color: var(--titre-sur-sombre); text-align: center; font-size: 18.7px; line-height: 20.57px; letter-spacing: -0.3px; padding: 14px var(--espace-3); border-bottom: 1px solid var(--filet); }
.cc-bandeau strong { font-weight: 500; }
.cc-entete { background: var(--fond-entete); box-shadow: var(--ombre-entete); }
.cc-entete__barre { display: flex; align-items: center; gap: var(--espace-5); min-height: 96px; }
.cc-entete__marques { display: flex; align-items: center; gap: var(--espace-4); }
.cc-entete__logo img { width: 150px; height: auto; }
.cc-entete__fabricant { display: flex; align-items: center; padding-left: var(--espace-4); border-left: 1px solid var(--filet-sur-sombre); }
.cc-entete__fabricant img { height: 44px; width: auto; filter: brightness(0) invert(1); }
.cc-menu { display: flex; align-items: center; gap: var(--espace-4); margin-left: auto; }
.cc-menu > li { position: relative; }
.cc-menu a { font-size: 15.4px; line-height: 20px; text-transform: uppercase; color: var(--menu); transition: color var(--duree-courte); }
.cc-menu a:hover, .cc-menu a[aria-current="page"] { color: var(--titre-sur-sombre); }
.cc-menu__chevron { display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-3px) rotate(45deg); opacity: 0.7; }
.cc-sousmenu { position: absolute; top: calc(100% + 18px); left: -20px; min-width: 220px; padding: var(--espace-2) 0; background: var(--fond-doux); box-shadow: var(--ombre-carte); }
.cc-sousmenu a { display: block; padding: var(--espace-2) var(--espace-4); font-size: 14px; text-transform: none; color: var(--texte); }
.cc-sousmenu a:hover { color: var(--accent); }
.cc-burger { display: none; width: 24px; height: 16px; margin-left: auto; border: 0; padding: 0; background: linear-gradient(var(--menu), var(--menu)) top / 100% 1px no-repeat, linear-gradient(var(--menu), var(--menu)) center / 100% 1px no-repeat, linear-gradient(var(--menu), var(--menu)) bottom / 100% 1px no-repeat; }
/* Posé sur la photo du premier écran : fond transparent, léger dégradé pour garder le menu lisible */
.cc-entete--sur-image { position: absolute; z-index: 3; top: 0; left: 0; right: 0; background: linear-gradient(to bottom, var(--voile), var(--voile-nul)); box-shadow: none; }
.cc-entete--telephone .cc-entete__barre { min-height: 80px; }
.cc-entete--telephone .cc-menu, .cc-entete--telephone .cc-entete__rdv { display: none; }
.cc-entete--telephone .cc-burger { display: block; }
.cc-entete--telephone .cc-entete__logo img { width: 112px; }
.cc-entete--telephone .cc-entete__fabricant img { height: 32px; }

/* Premier écran : une seule grande image, toute la hauteur de l'écran, texte en bas à gauche */
.cc-hero { position: relative; display: flex; align-items: flex-end; min-height: max(560px, 100svh); overflow: hidden; background: var(--fond-entete); color: var(--titre-sur-sombre); }
.cc-hero__image, .cc-banniere__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cc-hero::after, .cc-banniere::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, var(--voile-fort) 0%, var(--voile) 40%, var(--voile-nul) 75%); }
.cc-hero__contenu { position: relative; z-index: 2; width: 100%; padding-bottom: 64px; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--espace-7); }
.cc-hero__actions { display: flex; flex-wrap: wrap; gap: var(--espace-2); margin-top: var(--espace-5); }
.cc-hero__fabricant { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: var(--espace-2); text-align: right; font-size: 12.04px; letter-spacing: 1px; text-transform: uppercase; color: var(--titre-sur-sombre); }
.cc-hero__fabricant img.marque { height: 60px; width: auto; filter: brightness(0) invert(1); }
.cc-hero__fabricant img.france { height: 38px; width: auto; }
.cc-banniere { position: relative; display: flex; align-items: flex-end; min-height: max(420px, 56svh); overflow: hidden; background: var(--fond-entete); color: var(--titre-sur-sombre); }
.cc-banniere__contenu { position: relative; z-index: 2; width: 100%; padding-bottom: var(--espace-6); }
.cc-banniere__texte { max-width: 720px; margin-top: var(--espace-3); font-size: 14px; line-height: 23.8px; }
.cc-fil { background: var(--fond); border-bottom: 1px solid var(--filet); font-size: 12.04px; line-height: 17.2px; letter-spacing: 0.5px; color: var(--texte); padding: var(--espace-3) 0; }
.cc-fil ol { display: flex; flex-wrap: wrap; gap: var(--espace-2); }
.cc-fil li + li::before { content: "›"; margin-right: var(--espace-2); color: var(--texte-doux); }
.cc-fil [aria-current] { color: var(--titre); }

/* Cartes : l'image d'abord, le texte posé sur le fond, sans pavé blanc ni liseré */
.cc-univers { display: block; }
.cc-univers__image { aspect-ratio: 4 / 5; overflow: hidden; }
.cc-univers__image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duree-lente); }
.cc-univers:hover .cc-univers__image img { transform: scale(1.03); }
.cc-univers__titre { display: flex; align-items: center; justify-content: space-between; gap: var(--espace-3); padding: var(--espace-4) 0; border-bottom: 1px solid var(--filet); font-size: 18.47px; line-height: 22.17px; letter-spacing: -0.3px; color: var(--titre); }

.cc-etape { padding-top: var(--espace-4); border-top: 1px solid var(--filet); }
.cc-etape__numero { display: block; font-size: 60px; line-height: 85.7px; color: var(--titre); font-variant-numeric: tabular-nums; }
.cc-etape__titre { margin: var(--espace-2) 0 var(--espace-3); font-size: 21.99px; line-height: 26.39px; letter-spacing: -0.3px; color: var(--titre); }
.cc-etape__texte { color: var(--texte); margin-bottom: var(--espace-4); }

.cc-chiffres { display: grid; grid-template-columns: 1.1fr repeat(3, minmax(0, 1fr)); gap: var(--espace-5); align-items: center; }
.cc-chiffre { padding-left: var(--espace-5); border-left: 1px solid var(--filet-sur-sombre); }
.cc-chiffre__valeur { font-size: 60px; line-height: 70px; letter-spacing: -1.2px; color: var(--titre-sur-sombre); font-variant-numeric: tabular-nums; }
.cc-chiffre__libelle { font-size: 16px; color: var(--texte-sur-sombre); }

.cc-article { display: flex; flex-direction: column; }
.cc-article__image { aspect-ratio: 3 / 2; overflow: hidden; }
.cc-article__image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duree-lente); }
.cc-article:hover .cc-article__image img { transform: scale(1.03); }
.cc-article__date { margin-top: var(--espace-4); font-size: 12.04px; line-height: 20.47px; letter-spacing: 0.5px; color: var(--texte-doux); }
.cc-article__corps { display: flex; flex-direction: column; gap: 12px; padding-top: var(--espace-2); }
.cc-article__titre { font-size: 18px; line-height: 19.8px; letter-spacing: -0.3px; color: var(--titre); }
.cc-article__titre a { color: inherit; text-decoration: none; transition: color var(--duree-courte); }
.cc-article__titre a:hover { color: var(--accent); }
.cc-article__extrait { color: var(--texte); }

.cc-avis { padding-top: var(--espace-4); border-top: 1px solid var(--filet); color: var(--texte); }
.cc-avis__titre { font-size: 18.2px; line-height: 23.66px; letter-spacing: -0.3px; color: var(--titre); margin-bottom: var(--espace-3); }
.cc-avis__auteur { margin-top: var(--espace-4); font-style: italic; }
.cc-avis__nom { font-size: 14px; font-weight: 500; color: var(--titre); }
.cc-avis__projet { font-size: 13.02px; color: var(--texte-doux); }
.cc-note { display: inline-flex; align-items: center; gap: var(--espace-2); font-size: 14px; color: var(--titre); }
.cc-note__etoiles { letter-spacing: 2px; color: var(--accent); }
.cc-note small { color: var(--texte-doux); font-size: 13.02px; }

.cc-partenaires { display: grid; grid-template-columns: 1fr 3fr; gap: var(--espace-7); align-items: center; }
.cc-partenaires__logos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-6) var(--espace-7); }
.cc-partenaires__logos img { height: 56px; width: auto; filter: brightness(0) invert(1); opacity: 0.9; }
[data-theme="ancien"] .cc-partenaires__logos img { filter: none; opacity: 1; }
.cc-partenaires__logos--second { margin-top: var(--espace-6); padding-top: var(--espace-5); border-top: 1px solid var(--filet); gap: var(--espace-5) var(--espace-6); }
.cc-partenaires__logos--second img { height: 34px; opacity: 0.6; }
.cc-partenaires__nom { font-size: 26px; line-height: 1; font-weight: 500; letter-spacing: -0.6px; color: var(--titre); opacity: 0.9; }

.cc-portrait { display: grid; grid-template-columns: 5fr 6fr; gap: var(--espace-7); align-items: center; }
.cc-portrait__image img { width: 100%; height: auto; }
.cc-portrait__nom { margin-top: var(--espace-4); font-size: 18.47px; letter-spacing: -0.3px; color: var(--titre-sur-contraste); }
.cc-portrait__metier { font-size: 12.04px; letter-spacing: 1px; text-transform: uppercase; color: var(--texte-sur-contraste); }

/* Galerie : chaque photo à ses proportions, aucune n'est recadrée */
.cc-galerie { columns: 3; column-gap: 24px; }
.cc-galerie a { display: block; margin-bottom: 24px; break-inside: avoid; overflow: hidden; }
.cc-galerie img { width: 100%; height: auto; transition: transform var(--duree-lente), opacity var(--duree-courte); }
.cc-galerie a:hover img { transform: scale(1.03); opacity: 0.92; }

/* Bloc fabricant : Charles Réma en grand */
.cc-fabricant { display: grid; grid-template-columns: 1.25fr 1fr; background: var(--fond-doux); }
.cc-fabricant__image { min-height: 480px; }
.cc-fabricant__image img { width: 100%; height: 100%; object-fit: cover; }
.cc-fabricant__texte { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--espace-4); padding: var(--espace-7); }
.cc-fabricant__logo { height: 72px; width: auto; filter: brightness(0) invert(1); }
[data-theme="ancien"] .cc-fabricant__logo { filter: none; }
.cc-fabricant__france { height: 40px; width: auto; margin-top: var(--espace-2); }
[data-theme="ancien"] .cc-fabricant__france { filter: brightness(0.25); }

/* Réalisation en grand format : photos entières, au format 3 pour 2 */
.cc-grand__image { aspect-ratio: 3 / 2; overflow: hidden; }
.cc-grand__image img { width: 100%; height: 100%; object-fit: cover; }
.cc-grand__legende { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--espace-3) var(--espace-5); padding: var(--espace-4) 0; border-bottom: 1px solid var(--filet); }
.cc-grand__numero { font-size: 13.02px; letter-spacing: 1px; color: var(--texte-doux); font-variant-numeric: tabular-nums; }
.cc-grand__titre { font-size: 21.99px; line-height: 26.39px; letter-spacing: -0.3px; color: var(--titre); }
.cc-grand__details { margin-left: auto; font-size: 14px; color: var(--texte); }
.cc-grand-paire { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 24px; }

/* Formulaire : champs cernés d'un filet lisible, libellé visible au-dessus */
.cc-formulaire { display: grid; gap: var(--espace-4); }
.cc-libelle { display: grid; gap: var(--espace-1); font-size: 13.02px; line-height: 18.6px; color: var(--texte); }
.cc-champ { width: 100%; font: inherit; font-size: 13.02px; line-height: 23.8px; padding: var(--espace-3); border: 1px solid var(--bord-champ); border-radius: var(--rayon-0); background: transparent; color: var(--titre); transition: border-color var(--duree-courte); }
.cc-champ::placeholder { color: var(--texte-doux); opacity: 1; }
.cc-champ:focus { outline: none; border-color: var(--accent); }
textarea.cc-champ { min-height: 121px; resize: vertical; letter-spacing: 0.5px; }
.cc-case { display: flex; align-items: flex-start; gap: var(--espace-2); font-size: 13px; line-height: 22.1px; color: var(--texte); }
.cc-case input { margin-top: 5px; accent-color: var(--accent); }
.cc-case a { color: var(--titre); font-weight: 500; text-decoration: underline; }
.cc-contact { display: grid; grid-template-columns: 6fr 5fr; gap: var(--espace-7); align-items: start; }
.cc-coordonnees { display: grid; gap: 0; }
.cc-coordonnee { display: grid; grid-template-columns: 34px 1fr; gap: var(--espace-4); align-items: center; padding: var(--espace-4) 0; border-bottom: 1px solid var(--filet); }
.cc-coordonnee svg { width: 34px; height: 34px; color: var(--accent); }
.cc-coordonnee__valeur { font-size: 16px; color: var(--titre); }
.cc-coordonnee__aide { font-size: 12.04px; letter-spacing: 0.5px; color: var(--texte-doux); }

/* Questions fréquentes et onglets : des filets, plus de pavés */
.cc-faq { border-top: 1px solid var(--filet); }
.cc-faq details { border-bottom: 1px solid var(--filet); }
.cc-faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--espace-4); padding: var(--espace-4) 0; font-size: 16.08px; letter-spacing: -0.3px; color: var(--titre); cursor: pointer; list-style: none; }
.cc-faq summary::-webkit-details-marker { display: none; }
.cc-faq summary::after { content: "+"; flex: none; font-size: 21.99px; line-height: 1; color: var(--texte-doux); }
.cc-faq details[open] summary::after { content: "−"; }
.cc-faq__reponse { padding: 0 var(--espace-7) var(--espace-4) 0; color: var(--texte); }
.cc-onglets__liste { display: flex; flex-wrap: wrap; gap: var(--espace-5); border-bottom: 1px solid var(--filet); }
.cc-onglets__liste button { font: inherit; font-size: 14px; line-height: 20px; padding: var(--espace-3) 0; margin-bottom: -1px; border: 0; border-bottom: 1px solid transparent; background: none; color: var(--texte-doux); cursor: pointer; transition: color var(--duree-courte), border-color var(--duree-courte); }
.cc-onglets__liste button:hover { color: var(--titre); }
.cc-onglets__liste button[aria-selected="true"] { color: var(--titre); border-bottom-color: var(--accent); }
.cc-onglets__contenu { padding: var(--espace-5) 0; color: var(--texte); }
.cc-onglets__contenu p { font-weight: 500; color: var(--titre); margin-bottom: var(--espace-4); }
.cc-filtres { position: relative; margin-bottom: var(--espace-6); }
.cc-filtres__liste { display: flex; gap: var(--espace-5); overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; box-shadow: inset 0 -1px 0 var(--filet); }
.cc-filtres__liste::-webkit-scrollbar { display: none; }
.cc-filtres__liste a { flex: none; padding: var(--espace-3) 0; font-size: 14px; line-height: 20px; white-space: nowrap; color: var(--texte); scroll-snap-align: start; box-shadow: inset 0 -2px 0 transparent; transition: color var(--duree-courte), box-shadow var(--duree-courte); }
.cc-filtres__liste a:hover { color: var(--titre); box-shadow: inset 0 -2px 0 var(--filet); }
.cc-filtres__liste a[aria-current="page"] { color: var(--titre); font-weight: 500; box-shadow: inset 0 -2px 0 var(--accent); }
.cc-filtres::after { content: ""; position: absolute; top: 0; right: 0; bottom: 2px; width: 56px; background: linear-gradient(to right, transparent, var(--fond)); pointer-events: none; opacity: 0; }
.cc-filtres + .cc-corps { max-width: 820px; margin-bottom: var(--espace-6); }
@media (max-width: 1180px) { .cc-filtres::after { opacity: 1; } .cc-filtres__liste { padding-right: var(--espace-6); } }

/* Appels à contacter */
.cc-appel { display: flex; justify-content: center; align-items: center; gap: var(--espace-3); padding: 34px var(--espace-3); background: var(--fond-clair); border-top: 1px solid var(--filet); font-size: 21.22px; line-height: 23.34px; letter-spacing: -1.2px; color: var(--titre); }
.cc-appel::after { content: ""; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.cc-rdv { padding: 80px var(--espace-5); text-align: center; background: var(--contraste); color: var(--texte-sur-contraste); }
.cc-rdv__titre { font-size: 35px; line-height: 38.5px; font-weight: 500; letter-spacing: -1.2px; color: var(--titre-sur-contraste); text-wrap: balance; }
.cc-rdv__horaires { margin: var(--espace-3) 0; font-size: 12.04px; letter-spacing: 0.5px; }
.cc-rdv .cc-note, .cc-rdv .cc-note__etoiles { color: var(--titre-sur-contraste); }
.cc-rdv .cc-note small { color: inherit; }

/* Pied de page */
.cc-pied { background: var(--fond-entete); color: var(--texte-sur-sombre); font-size: 12.04px; line-height: 20.47px; letter-spacing: 0.5px; border-top: 1px solid var(--filet); }
.cc-pied__colonnes { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: var(--espace-5); padding-block: 80px; }
.cc-pied__titre { font-size: 15.89px; line-height: 17.48px; letter-spacing: -0.3px; color: var(--titre-sur-sombre); padding-bottom: var(--espace-4); margin-bottom: var(--espace-3); border-bottom: 1px solid var(--filet-pied); }
.cc-pied li { padding: 3px 0; }
.cc-pied a:hover { color: var(--titre-sur-sombre); }
.cc-pied p + p { margin-top: var(--espace-3); }
.cc-pied__bas { background: var(--fond-pied-bas); border-top: 1px solid var(--filet-pied); }
.cc-pied__bas .cc-conteneur { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-4) var(--espace-5); min-height: 70px; padding-block: var(--espace-3); color: var(--discret-pied); }
.cc-pied__bas img { width: 90px; height: auto; }
.cc-pied__bas img.fabricant { width: auto; height: 30px; filter: brightness(0) invert(1); opacity: 0.8; }
.cc-pied__reseaux { display: flex; gap: var(--espace-2); margin-left: auto; }
.cc-pied__reseaux a { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--filet-pied); color: var(--titre-sur-sombre); }
.cc-pied__reseaux svg { width: 14px; height: 14px; }

/* Corps d'un article : ligne de date, texte, tableau, articles voisins */
.cc-meta { display: flex; flex-wrap: wrap; gap: var(--espace-1) var(--espace-3); font-size: 13px; line-height: 18.57px; color: var(--texte-doux); }
.cc-meta span + span::before { content: "·"; margin-right: var(--espace-3); }
.cc-prose { max-width: 820px; }
.cc-prose > * + * { margin-top: var(--espace-4); }
.cc-prose > h2, .cc-prose > h3 { margin-top: var(--espace-6); }
/* Liens dans le texte uniquement : maquette John, sans modifier les conteneurs. */
.cc-prose p a, .cc-prose li a,
.cc-faq__reponse p a, .cc-faq__reponse li a,
p.cc-corps[data-slot^="PAG-"] a { color: var(--titre); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--duree-courte); }
.cc-prose p a:hover, .cc-prose li a:hover,
.cc-faq__reponse p a:hover, .cc-faq__reponse li a:hover,
p.cc-corps[data-slot^="PAG-"] a:hover { color: var(--accent); text-decoration-thickness: 2px; }
.cc-tableau-cadre { overflow-x: auto; }
.cc-tableau { width: 100%; border-collapse: collapse; font-size: 14.32px; line-height: 20.46px; text-align: left; }
.cc-tableau th { font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; color: var(--texte-doux); padding: var(--espace-3); border-bottom: 1px solid var(--bord-champ); }
.cc-tableau td { padding: var(--espace-3); border-bottom: 1px solid var(--filet); color: var(--texte); vertical-align: top; }
.cc-voisins { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espace-5); margin-top: var(--espace-7); padding-top: var(--espace-4); border-top: 1px solid var(--filet); }
.cc-voisins a { display: grid; gap: var(--espace-1); align-content: start; }
.cc-voisins a + a { text-align: right; }
.cc-voisins small { font-size: 12.04px; letter-spacing: 1px; text-transform: uppercase; color: var(--texte-doux); }
.cc-voisins span { font-size: 18px; line-height: 19.8px; letter-spacing: -0.3px; color: var(--titre); }

/* Numéros de page */
.cc-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--espace-2); }
.cc-pagination a, .cc-pagination span { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 var(--espace-3); border: 1px solid var(--filet); font-size: 14px; color: var(--texte); transition: border-color var(--duree-courte), color var(--duree-courte); }
.cc-pagination a:hover { border-color: var(--bord-champ); color: var(--titre); }
.cc-pagination [aria-current] { border-color: var(--accent); color: var(--titre); }

/* Villes desservies : une liste à filets, qui tient 10 comme 334 communes */
.cc-villes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 var(--espace-5); border-top: 1px solid var(--filet); }
.cc-villes a { display: flex; align-items: center; justify-content: space-between; gap: var(--espace-2); padding: var(--espace-3) 0; border-bottom: 1px solid var(--filet); font-size: 14px; color: var(--texte); transition: color var(--duree-courte); }
.cc-villes a:hover { color: var(--titre); }

/* Vidéo : une image fixe d'abord, la vidéo au clic */
.cc-video { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--fond-doux); }
.cc-video img { width: 100%; height: 100%; object-fit: cover; }
.cc-video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--voile), var(--voile-nul) 60%); }
.cc-video__lecture { position: absolute; z-index: 2; inset: 0; margin: auto; width: 88px; height: 88px; display: grid; place-items: center; border: 1px solid var(--bord-bouton); background: none; color: var(--titre-sur-sombre); cursor: pointer; transition: background-color var(--duree-courte), color var(--duree-courte); }
.cc-video:hover .cc-video__lecture { background: var(--titre-sur-sombre); color: var(--fond-entete); }
.cc-video__lecture svg { width: 22px; height: 22px; }
.cc-video__titre { position: absolute; z-index: 2; left: var(--espace-5); bottom: var(--espace-4); font-size: 18.47px; letter-spacing: -0.3px; color: var(--titre-sur-sombre); }

/* Fenêtre de prise de rendez-vous */
.cc-fenetre-fond { display: grid; place-items: center; padding: var(--espace-5); background: var(--voile-fort); }
.cc-fenetre { position: relative; width: min(100%, 560px); padding: var(--espace-7) var(--espace-6) var(--espace-6); background: var(--fond-doux); box-shadow: var(--ombre-carte); }
.cc-fenetre__fermer { position: absolute; top: var(--espace-2); right: var(--espace-2); width: 44px; height: 44px; border: 0; background: none; color: var(--titre); font: inherit; font-size: 21.99px; line-height: 1; cursor: pointer; }

@media (max-width: 1000px) { .cc-villes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cc-villes { grid-template-columns: minmax(0, 1fr); } .cc-voisins { grid-template-columns: minmax(0, 1fr); } .cc-voisins a + a { text-align: left; } .cc-fenetre { padding: var(--espace-6) var(--espace-4) var(--espace-5); } }

/* Mouvement : trois règles, sans script, coupées si le visiteur demande moins d'animation */
@view-transition { navigation: auto; }
@keyframes cc-zoom-lent { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes cc-fondu { from { opacity: 0; } to { opacity: 1; } }
.cc-hero__image { animation: cc-zoom-lent 20s ease-out both; }
.cc-grand__image img, .cc-fabricant__image img { animation: cc-fondu var(--duree-lente) ease-out both; }
@media (prefers-reduced-motion: reduce) {
  .cc *, .cc *::before, .cc *::after { animation: none !important; transition: none !important; }
  @view-transition { navigation: none; }
}

/* Tablette et téléphone */
@media (max-width: 1000px) {
  .cc-grille--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cc-chiffres, .cc-partenaires, .cc-fabricant, .cc-contact, .cc-portrait { grid-template-columns: minmax(0, 1fr); }
  .cc-chiffres { gap: var(--espace-4); }
  .cc-chiffre { padding: var(--espace-3) 0 0; border-left: 0; border-top: 1px solid var(--filet-sur-sombre); }
  .cc-pied__colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cc-galerie { columns: 2; }
  .cc-menu, .cc-entete__rdv { display: none; }
  .cc-burger { display: block; }
  .cc-fabricant__image { min-height: 320px; }
}
@media (max-width: 640px) {
  .cc-conteneur { padding-inline: var(--espace-4); }
  .cc-section { padding: var(--espace-7) 0; }
  .cc-grille--2, .cc-grille--3, .cc-grille--4, .cc-grand-paire, .cc-pied__colonnes { grid-template-columns: minmax(0, 1fr); }
  .cc-galerie { columns: 1; }
  .cc-titre-hero { font-size: 36px; line-height: 39.6px; letter-spacing: -1.2px; }
  .cc-titre-page { font-size: 35px; line-height: 38.5px; }
  .cc-titre-section, .cc-rdv__titre { font-size: 28px; line-height: 30.8px; }
  .cc-hero__contenu { flex-direction: column; align-items: flex-start; gap: var(--espace-5); padding-bottom: var(--espace-6); }
  .cc-hero__fabricant { align-items: flex-start; text-align: left; }
  .cc-entete__barre { min-height: 80px; }
  .cc-entete__logo img { width: 112px; }
  .cc-entete__fabricant img { height: 32px; }
  .cc-fabricant__texte { padding: var(--espace-5) var(--espace-4); }
  .cc-bandeau { font-size: 14px; line-height: 15.4px; }
  .cc-grand__details { margin-left: 0; }
  .cc-btn { white-space: normal; }
}

/* Outils des aperçus du design system (hors site) */
.cc-apercu { padding: var(--espace-5); }
.cc-apercu--sombre { background: var(--fond-entete); }
.cc-apercu__note { font-size: 12.04px; letter-spacing: 0.5px; color: var(--texte-doux); margin-bottom: var(--espace-2); }