/*
Theme Name: OCI
Theme URI: https://wordpress.org/themes/oci/
Author: OCI
Author URI: https://wordpress.org
Description: OCI emphasizes simplicity and adaptability. It offers flexible design options, supported by a variety of patterns for different page types, such as services and landing pages, making it ideal for building personal blogs, professional portfolios, online magazines, or business websites. Its templates cater to various blog styles, from text-focused to image-heavy layouts. Additionally, it supports international typography and diverse color palettes, ensuring accessibility and customization for users worldwide.
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.2
Version: 1.5
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: oci
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

/*
 * IMPORTANT: This file is only served on the frontend when `SCRIPT_DEBUG` is enabled;
 * in most instances, the `style.min.css` file will be served. It is not recommended that you
 * use the Theme File Editor to modify this stylesheet. Instead, add the necessary style
 * overrides via "Additional CSS" in the Site Editor.
 */

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
a {
	text-decoration-thickness: 1px !important;
	text-underline-offset: .1em;
}

/* Focus styles */
:where(.wp-site-blocks *:focus) {
	outline-width: 2px;
	outline-style: solid;
}

/* Increase the bottom margin on submenus, so that the outline is visible. */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
	margin-bottom: 3px;
}

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	outline-offset: 4px;
}

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	outline-offset: 0;
}

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
	text-wrap: pretty;
}

/*
 * Change the position of the more block on the front, by making it a block level element.
 * https://github.com/WordPress/gutenberg/issues/65934
*/
.more-link {
	display: block;
}

/*
 * Prevents unnecessary scrollbars while handling long lines of preformatted text.
 * https://core.trac.wordpress.org/ticket/63875
 */
:where(pre) {
	overflow-x: auto;
}



/* CUSTOM OCI */

/* ===== O'Work — styles complémentaires ===== */

.tab-content { display: none; }
.tab-content-1 { display: block; }

.tab {
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* Léger effet au survol pour suggérer l'interactivité */
.tab:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

/* État actif au clic */
.tab.active {
  background-color: var(--wp--preset--color--accent-4) !important;
  transform: translateY(-3px);
}
.tab.active * {
  color: #fff !important;
  transition: color 0.3s ease;
}
.tab.active svg,
.tab.active svg *,
.wp-block.is-selected,
.wp-block.is-selected *,
.wp-block.is-selected svg,
.wp-block.is-selected svg *,
.wp-block.is-selected .wp-block-icon svg,
.wp-block.is-selected .wp-block-icon svg * {
  color: #fff !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  transition: color 0.3s ease, fill 0.3s ease, stroke 0.3s ease;
}


:is(
  .tab.active svg,
  .tab.active svg *,
  .wp-block.is-selected,
  .wp-block.is-selected *,
  .wp-block.is-selected svg,
  .wp-block.is-selected svg *,
  .wp-block.is-selected .wp-block-icon svg,
  .wp-block.is-selected .wp-block-icon svg *
):is(*, #_) {
  color: #fff !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  transition: color 0.3s ease, fill 0.3s ease, stroke 0.3s ease;
}




.tab.active img,
.wp-block.is-selected img {
  filter: brightness(0) invert(1);
  transition: filter 0.3s ease;
}

/* Fondu du contenu de droite au changement d'onglet */
.tab-content {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.tab-content.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* TIMELINE */

.timeline {
  position: relative;
}

.timeline-track {
  position: absolute;
  width: 3px;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--wp--preset--color--accent-3) 0,
    var(--wp--preset--color--accent-3) 6px,
    transparent 6px,
    transparent 14px
  );
  z-index: 0;
}

.timeline-track-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  background-color: var(--wp--preset--color--accent-3);
  transition: height 0.1s linear;
}

.timeline .is-nowrap {
  position: relative;
  z-index: 1;
}

/* Cercle non atteint : terne */
.timeline .has-accent-3-background-color {
  background-color: #c9cadf !important;
  transition: background-color 0.4s ease, transform 0.3s ease;
}

/* Cercle atteint par le trait : couleur pleine + léger effet */
.timeline .has-accent-3-background-color.is-reached {
  background-color: var(--wp--preset--color--accent-3) !important;
  transform: scale(1.08);
}

header {
    margin-bottom: -80px;
}


.pictoRondMauve {
padding:10px;
background-color:#5256a1;
display:flex;
border-radius:50px;
aspect-ratio:1/1 auto;
align-items: center;
justify-content: center;
}

.cachecache, body .is-layout-flex.cachecache {display:none !important;}

.zIndex5 {
z-index: 5;
position: relative;
}

.zindex10 {
z-index:10;
position: relative;
}

.zindex100 {
z-index:100;
position: relative;
}

.hr1 {
border:1px solid;
/*height:1px;*/
}

.hr30 {
width:30%;
border:1px solid;
height:1px;
}

.has-base-background-color.blocHeb:hover {
background-color: #edeefc !important;
}

.has-base-background-color.blocCas:hover {
background-color: #f1eef9 !important;
}

.has-base-background-color.blocHeb.accordeonOpen {
background-color:#5256a1 !important;
}

.has-base-background-color.blocHeb.accordeonOpen .gspb_iconsList__item, .has-base-background-color.blocHeb.accordeonOpen h3, .has-base-background-color.blocHeb.accordeonOpen p, .has-base-background-color.blocHeb.accordeonOpen .wp-block-accordion-heading__toggle-icon {
color:#ffffff !important;
}

.has-base-background-color.blocHeb.accordeonOpen gspb_iconsList.gspb_iconsList__item svg path, .has-base-background-color.blocHeb.accordeonOpen .gspb_iconsList.gspb_iconsList__item:hover svg path {
fill:#ffffff !important;
}

.has-base-background-color.blocHeb.accordeonOpen .hr1 {
border-color:#ffffff;
background-color:#ffffff !important;
}

/*.imgAbsolu {
display:block;
position:absolute;
}*/

.rotateImg img {
transform: rotate(25deg);
}

/* Image en fond */

.bgHero {
background-image: url(https://cloudeo.swebwp.oci.eu/wp-content/uploads/2026/10/mosaique-animee.svg), var(--wp--preset--gradient--custom-violet-mauve);
    background-size: 35%, auto;
    background-repeat: no-repeat;
    background-position: 50% 40%;
}

.bgPixelsLeft {
background-image: url(https://cloudeo.swebwp.oci.eu/wp-content/uploads/2026/09/pixels_fond-2.svg);
    background-position: -420px bottom;
    background-repeat: no-repeat;
    background-size: 600px;
}

.bgPixelsMidRight{
background-image: url(https://cloudeo.swebwp.oci.eu/wp-content/uploads/2026/09/pixels_fond-2.svg);
    background-position: right -395px top 60%;
    background-repeat: no-repeat;
    background-size: 600px;
}

.bgPixelsTopRight{
background-image: url(https://cloudeo.swebwp.oci.eu/wp-content/uploads/2026/09/pixels_fond-2.svg);
    background-position: right -455px top -70px;
    background-repeat: no-repeat;
    background-size: 600px;
}

/* Menu */

:root :where(.wp-block-navigation a:where(:not(.wp-element-button)):hover) {
    text-decoration: none !important;
}
.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
    background-color: #fff;
    border: none;
    box-shadow: 2px 2px 10px 3px rgb(25 32 57 / 10%);
}
.wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container {
left:0;
}

.wp-block-navigation-link a.wp-block-navigation-item__content:hover {
    background-color: var(--wp--preset--color--accent-1);
color: var(--wp--preset--color--contrast);
}

.btnDarkBlue.has-contrast-border-color:hover {
border: 1px solid var(--wp--preset--color--base) !important;
background-color:var(--wp--preset--color--accent-3) !important;
}

.btnDarkBlue:hover .wp-block-button__link {
background-color:var(--wp--preset--color--accent-3) !important;
}

fieldset {
border: 0; padding: 0; margin: 0;
}

.reprenezMaitrise {
 background-image: url(https://cloudeo.swebwp.oci.eu/wp-content/uploads/2026/10/banniere-tetes.svg), var(--wp--preset--gradient--custom-mauve-parme);
    background-size: 80%, auto;
    background-repeat: no-repeat;
    background-position: center;
} 

/* Effet hover sur les colonnes à fond violet foncé */
.columnViolet .wp-block-column:hover {
  background-color: #f1eef9 !important;
  color:#3d3170a6;
}
.columnViolet .wp-block-column:hover p.has-accent-5-color {
    color: #52569f !important;
}
.columnViolet .wp-block-column:hover h3.has-base-color, .columnViolet .wp-block-column:hover p.has-base-color  {
    color: var(--wp--preset--color--accent-4) !important;
}

/* ==========================================================
   Formulaire de contact Cloudéo — Contact Form 7
   À coller dans Apparence > Éditeur > Styles > CSS additionnel
   (ou dans la zone « Style » du thème).
   Ajuste uniquement les variables ci-dessous si besoin.
   ========================================================== */

.cf-cloudeo {
  /* Couleurs : reprennent les presets du thème FSE s'ils existent */
  --cf-accent: var(--wp--preset--color--primary, #234695);
  --cf-text: var(--wp--preset--color--accent-4);
  --cf-bg: var(--wp--preset--color--base, #ffffff);
  --cf-muted: color-mix(in srgb, var(--cf-text) 55%, transparent);
  --cf-line: color-mix(in srgb, var(--cf-text) 18%, transparent);
  --cf-field-bg: color-mix(in srgb, var(--cf-text) 3%, var(--cf-bg));
  --cf-error: #c62828;
  --cf-radius: 10px;

  font-family: inherit;          /* même typo que le reste du site */
  color: var(--cf-text);
  display: grid;
  gap: 1.5rem;
  max-width: 820px;
  margin-inline: auto;
}

/* Contact Form 7 ajoute des <p> et <br> automatiques : on les neutralise */
.cf-cloudeo p { margin: 0; }
.cf-cloudeo br { display: none; }

/* ---------- Grille ---------- */
.cf-row {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cf-row--3 { grid-template-columns: 1fr 1.4fr 1.6fr; }

@media (max-width: 720px) {
  .cf-row,
  .cf-row--3 { grid-template-columns: 1fr; }
}

/* ---------- Libellés ---------- */
.cf-field { display: grid; gap: .5rem; }

.cf-label {
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.3;
}
.cf-label abbr {
  color: #e63447;
  text-decoration: none;
  border: 0;
}

/* ---------- Champs ---------- */
.cf-cloudeo .wpcf7-form-control-wrap { display: block; }

.cf-cloudeo input[type="text"],
.cf-cloudeo input[type="tel"],
.cf-cloudeo input[type="email"],
.cf-cloudeo textarea {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 1rem;
  color: var(--cf-text);
  background: var(--cf-field-bg);
  /*border: 1px solid var(--cf-line);*/
  border:none;
  border-radius: var(--cf-radius);
  padding: .85rem 1rem;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}

.cf-cloudeo textarea {
  min-height: 9rem;
  resize: vertical;
  line-height: 1.5;
}

.cf-cloudeo ::placeholder { color: var(--cf-muted); opacity: 1; }

.cf-cloudeo input:hover,
.cf-cloudeo textarea:hover {
  border-color: color-mix(in srgb, var(--cf-text) 35%, transparent);
}

.cf-cloudeo input:focus,
.cf-cloudeo textarea:focus {
  outline: none;
  background: var(--cf-bg);
  border-color: var(--cf-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cf-accent) 22%, transparent);
}

/* ---------- Choix (cases à cocher en pastilles) ---------- */
.cf-choice {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.cf-choice legend { padding: 0; margin-bottom: .75rem; }

.cf-choice .wpcf7-checkbox,
.cf-choice .wpcf7-radio {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

.cf-choice .wpcf7-list-item { margin: 0; }

.cf-choice .wpcf7-list-item label {
  position: relative;
  display: block;
  cursor: pointer;
}

/* case native masquée visuellement mais toujours accessible au clavier */
.cf-choice input[type="checkbox"],
.cf-choice input[type="radio"] {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}

.cf-choice .wpcf7-list-item-label {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .65rem 1.1rem;
  font-size: .95rem;
  line-height: 1.3;
  border: 1px solid var(--cf-line);
  border-radius: 999px;
  background: var(--cf-field-bg);
  transition: border-color .15s, background-color .15s, color .15s;
}

/* petit indicateur rond devant le texte */
.cf-choice .wpcf7-list-item-label::before {
  content: "";
  flex: none;
  width: .9rem;
  height: .9rem;
  border-radius: 50%;
  border: 2px solid var(--cf-line);
  background: var(--cf-bg);
  transition: border-color .15s, box-shadow .15s;
}

.cf-choice label:hover .wpcf7-list-item-label {
  border-color: color-mix(in srgb, var(--cf-accent) 50%, transparent);
}

.cf-choice input:checked + .wpcf7-list-item-label {
  border-color: var(--cf-accent);
  background: color-mix(in srgb, var(--cf-accent) 8%, var(--cf-bg));
  color: var(--cf-text);
  font-weight: 600;
}
.cf-choice input:checked + .wpcf7-list-item-label::before {
  border-color: var(--cf-accent);
  box-shadow: inset 0 0 0 3px var(--cf-bg);
  background: var(--cf-accent);
}

.cf-choice input:focus-visible + .wpcf7-list-item-label {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cf-accent) 30%, transparent);
}

/* ---------- Bouton ---------- */
.cf-submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}

.cf-cloudeo .wpcf7-submit {
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  color: #fff;
  background: var(--cf-text);
  border: 0;
  border-radius: 999px;
  padding: .95rem 2rem;
  cursor: pointer;
  transition: background-color .15s, transform .15s;
}
.cf-cloudeo .wpcf7-submit:hover {
  background: color-mix(in srgb, var(--cf-accent) 85%, #000);
}
.cf-cloudeo .wpcf7-submit:active { transform: translateY(1px); }
.cf-cloudeo .wpcf7-submit:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--cf-accent) 35%, transparent);
  outline-offset: 3px;
}
.cf-cloudeo .wpcf7-submit:disabled { opacity: .6; cursor: progress; }

.cf-note { font-size: .85rem; color: var(--cf-muted); }

.cf-cloudeo .wpcf7-spinner { margin: 0; }

/* ---------- Erreurs et messages ---------- */
.cf-cloudeo .wpcf7-not-valid {
  border-color: var(--cf-error) !important;
}
.cf-cloudeo .wpcf7-not-valid-tip {
  font-size: .85rem;
  color: var(--cf-error);
  margin-top: .4rem;
}

.wpcf7 form .wpcf7-response-output {
  max-width: 820px;
  margin: 1.5rem auto 0;
  padding: .9rem 1.1rem;
  border-radius: var(--cf-radius, 10px);
  font-size: .95rem;
}

@media (prefers-reduced-motion: reduce) {
  .cf-cloudeo * { transition: none !important; }
}



/* IASS TEST--------------------- */
/* ===== Page IaaS – styles des nouvelles sections (à coller dans la zone Style) ===== */

/* Liste à coches (hero + bénéfices) */
.listeCheck{list-style:none;padding-left:0;margin:0}
.listeCheck li{position:relative;padding-left:30px;margin-bottom:7px;font-weight:600;color:var(--wp--preset--color--base)}
.listeCheck li::before{content:"✓";position:absolute;left:0;top:2px;width:18px;height:18px;border-radius:50%;
  background:var(--wp--preset--color--accent-3);color:#fff;font-size:11px;line-height:18px;text-align:center}
.listeCheckMauve li{color:var(--wp--preset--color--accent-4);font-weight:500}

/* Cartes génériques */
.carteIaas{background:var(--wp--preset--color--base);border:1px solid var(--wp--preset--color--accent-3);
  border-radius:30px;padding:var(--wp--preset--spacing--40);height:100%;box-sizing:border-box}
.titreCarte{font-size:1.15rem;font-weight:600;color:var(--wp--preset--color--accent-4);margin-top:.4em}

/* Comment ça fonctionne : options activables */
.optionIaas{cursor:pointer;user-select:none;transition:background .2s,border-color .2s}
.optionIaas .toggleIaas{display:inline-flex;align-items:center;gap:10px;margin:0;font-size:.85rem;font-weight:600;color:var(--wp--preset--color--accent-3)}
.optionIaas .toggleIaas::before{content:"";flex:none;width:38px;height:20px;border-radius:20px;background-color:#d9d6e8;
  background-image:radial-gradient(circle at 10px 50%,#fff 7px,transparent 8px);transition:background .2s}
.optionIaas.is-on{background:#f3f0fb;border-color:var(--wp--preset--color--accent-4)}
.optionIaas.is-on .toggleIaas::before{background-color:var(--wp--preset--color--accent-3);
  background-image:radial-gradient(circle at 28px 50%,#fff 7px,transparent 8px)}
.optionIaas:focus-visible{outline:2px solid var(--wp--preset--color--accent-3);outline-offset:3px}

/* Certifications : rangée de logos (placeholders) */
.logosCertif{overflow:hidden;gap:var(--wp--preset--spacing--40)!important}
.logoPlaceholder{flex:none;width:150px;height:70px;margin:0;display:flex;align-items:center;justify-content:center;
  border:1px dashed var(--wp--preset--color--accent-3);border-radius:16px;color:var(--wp--preset--color--accent-3)}

/* Cas d'usage */
.etiquetteCas{display:inline-block;margin:0;padding:4px 14px;border-radius:20px;font-size:.8rem;font-weight:600;
  background:var(--wp--preset--color--accent-3);color:#fff}
.detailsIaas summary{cursor:pointer;font-weight:600;color:var(--wp--preset--color--accent-3);list-style:none}
.detailsIaas summary::-webkit-details-marker{display:none}
.detailsIaas summary::after{content:" +";}
.detailsIaas[open] summary::after{content:" –";}
.detailsIaas h4{font-size:1rem;margin-bottom:.3em;color:var(--wp--preset--color--accent-4)}

/* Méthode : 5 étapes reliées */
.methodeIaas .wp-block-columns{gap:var(--wp--preset--spacing--30)}
.etapeIaas{position:relative}
.numEtape{width:48px;height:48px;margin:0 0 12px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:1.2rem;background:var(--wp--preset--color--accent-4);color:#fff;position:relative;z-index:1}
.titreEtape{font-size:1.05rem;font-weight:600;color:var(--wp--preset--color--accent-4)}
@media (min-width:782px){
  .methodeIaas .wp-block-column:not(:last-child) .etapeIaas::before{content:"";position:absolute;top:24px;left:48px;
    right:calc(-1 * var(--wp--preset--spacing--30));height:2px;background:var(--wp--preset--color--accent-3);opacity:.4}
}

/* Différenciation */
.carteForte{height:100%;box-sizing:border-box;border-radius:30px;padding:var(--wp--preset--spacing--40);
  background:var(--wp--preset--color--accent-4);color:#fff}
.carteForte .titreCarte{color:#fff}

/* Témoignages */
.citationIaas{font-size:1.05rem;font-style:italic;line-height:1.6}
.auteurIaas{margin-bottom:0;font-size:.9rem;color:var(--wp--preset--color--accent-3)}
.videoPlaceholder{aspect-ratio:16/9;border-radius:20px;background:var(--wp--preset--color--accent-4);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;margin-bottom:1em}
.playIaas{font-size:2rem;margin:0}
.videoLabel{margin:0;font-size:.9rem;opacity:.8}

/* Pictos */
.pictoTab img{width:50px!important;height:50px!important;object-fit:contain}
.pictoChiffre{margin:0!important}
.pictoChiffre img{width:80px!important;height:auto}

/* Blog */
.blogIaas .wp-block-post-featured-image img{border-radius:20px}
.blogIaas .wp-block-post-title{font-size:1.1rem}

/* CTA */
.ctaIaas{border-radius:50px;padding:var(--wp--preset--spacing--60) var(--wp--preset--spacing--50)}

/* Effet hover sur les colonnes, fond sombre */
.columnDarkBG .wp-block-column:hover {
  background-color: var(--wp--preset--color--accent-5) !important;
}
.columnDarkBG .wp-block-column:hover h4, .columnDarkBG .wp-block-column:hover p {
  color: var(--wp--preset--color--accent-4) !important;
}
.columnDarkBG .wp-block-column:hover .gspb_iconBox__wrapper {
  background-color: var(--wp--preset--color--accent-4, #3d3170) !important;
}
.columnDarkBG .wp-block-column:hover .gspb_iconBox__wrapper svg, .columnDarkBG .wp-block-column:hover .gspb_iconBox__wrapper svg, .columnDarkBG .wp-block-column:hover .gspb_iconBox__wrapper svg path {
fill: var(--wp--preset--color--base, #ffffff) !important;
}

/* Effet hover sur les colonnes, fond clair */
.columnLightBG .wp-block-column:hover {
  background-color: var(--wp--preset--color--accent-4) !important;
}
.columnLightBG .wp-block-column:hover h4, .columnLightBG .wp-block-column:hover p {
  color: #ffffff !important;
}
/*.columnLightBG .wp-block-column:hover .gspb_iconBox__wrapper {
  background-color: #ffffff !important;
}
.columnLightBG .wp-block-column:hover .gspb_iconBox__wrapper svg, .columnLightBG .wp-block-column:hover .gspb_iconBox__wrapper svg, .columnLightBG .wp-block-column:hover .gspb_iconBox__wrapper svg path {
fill: var(--wp--preset--color--base, #ffffff) !important;
}*/


/* antonin */
/* ---------- Listes avec icône (blocs Liste) ---------- */
.oci-ilist {
	--oci-ico-size: 18px;
	--oci-ico-color: currentColor;
	list-style: none;
	padding-left: 0;
}
.oci-ilist li {
	display: flex;
	align-items: flex-start;
	gap: 15px;
	margin-block-start: 0;
}
.oci-ilist li::before {
	content: "";
	flex: 0 0 var(--oci-ico-size);
	width: var(--oci-ico-size);
	height: var(--oci-ico-size);
	background-color: var(--oci-ico-color);
	-webkit-mask: var(--oci-ico) center / contain no-repeat;
	mask: var(--oci-ico) center / contain no-repeat;
}

/* Flèche (services de l'hébergement) */
.oci-ilist--arrow {
	--oci-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 896 1024'%3E%3Cpath d='M436.202 76.202l-39.598 39.598c-9.372 9.372-9.372 24.568 0 33.942l310.26 310.258h-682.864c-13.254 0-24 10.746-24 24v56c0 13.254 10.746 24 24 24h682.864l-310.26 310.26c-9.372 9.372-9.372 24.568 0 33.942l39.598 39.598c9.372 9.372 24.568 9.372 33.942 0l418.828-418.828c9.372-9.372 9.372-24.568 0-33.942l-418.83-418.828c-9.372-9.374-24.568-9.374-33.94 0z'/%3E%3C/svg%3E");
	--oci-ico-size: 15px;
	--oci-ico-color: var(--wp--preset--color--contrast, #191f39);
	color: var(--wp--preset--color--accent-4, #3d3170);
}
.oci-ilist--arrow li {
	align-items: center;
}
.oci-ilist--arrow li:hover {
	color: var(--wp--preset--color--accent-3, #52569f);
	--oci-ico-color: var(--wp--preset--color--accent-3, #52569f);
}

/* Croix (comparatif « avant ») */
.oci-ilist--times {
	--oci-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M512 16c-274 0-496 222-496 496s222 496 496 496 496-222 496-496-222-496-496-496zM512 944c-237.4 0-432-192.2-432-432 0-237.4 192.2-432 432-432 237.4 0 432 192.2 432 432 0 237.4-192.2 432-432 432zM701.6 373.4l-138.6 138.6 138.6 138.6c9.4 9.4 9.4 24.6 0 34l-17 17c-9.4 9.4-24.6 9.4-34 0l-138.6-138.6-138.6 138.6c-9.4 9.4-24.6 9.4-34 0l-17-17c-9.4-9.4-9.4-24.6 0-34l138.6-138.6-138.6-138.6c-9.4-9.4-9.4-24.6 0-34l17-17c9.4-9.4 24.6-9.4 34 0l138.6 138.6 138.6-138.6c9.4-9.4 24.6-9.4 34 0l17 17c9.2 9.4 9.2 24.6 0 34z'/%3E%3C/svg%3E");
}

/* Coche (comparatif « après » et onglets) */
.oci-ilist--check,
.oci-ilist--tab {
	--oci-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M512 16c-273.934 0-496 222.066-496 496s222.066 496 496 496 496-222.066 496-496-222.066-496-496-496zM512 112c221.064 0 400 178.902 400 400 0 221.064-178.902 400-400 400-221.064 0-400-178.902-400-400 0-221.064 178.902-400 400-400zM792.408 372.534l-45.072-45.436c-9.334-9.41-24.53-9.472-33.94-0.136l-282.704 280.432-119.584-120.554c-9.334-9.41-24.53-9.472-33.94-0.138l-45.438 45.072c-9.41 9.334-9.472 24.53-0.136 33.942l181.562 183.032c9.334 9.41 24.53 9.472 33.94 0.136l345.178-342.408c9.408-9.336 9.468-24.532 0.134-33.942z'/%3E%3C/svg%3E");
}

.oci-ilist--times,
.oci-ilist--check {
	--oci-ico-color: var(--wp--preset--color--accent-3, #52569f);
}
.oci-ilist--check {
	font-weight: 600;
}
.oci-ilist--times li,
.oci-ilist--check li {
	margin-bottom: 7px;
}

.oci-ilist.oci-ilist--tab {
	margin-block-start: var(--wp--style--block-gap, 1.2rem);
}
.oci-ilist--tab {
	--oci-ico-color: var(--wp--preset--color--base, #ffffff);
	font-family: "Fira Code", sans-serif;
	font-size: 18px;
	font-weight: 300;
}
.oci-ilist--tab li {
	margin-bottom: 20px;
}
.oci-ilist--tab li::before {
	margin-top: 5px;
}

/* ---------- Blocs Détails (remplacent les accordéons) ---------- */
.oci-heb > summary,
.oci-faq > summary {
	display: flex;
	align-items: center;
	list-style: none;
	cursor: pointer;
	padding: var(--wp--preset--spacing--20, 1em) 0;
	font-weight: 600;
	line-height: 1.125;
	letter-spacing: -0.1px;
	text-wrap: pretty;
}
.oci-heb > summary::-webkit-details-marker,
.oci-faq > summary::-webkit-details-marker {
	display: none;
}
.oci-heb > summary::after,
.oci-faq > summary::after {
	content: "+";
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 1.2em;
	width: 1.2em;
	height: 1.2em;
	margin-left: auto;
}
.oci-heb[open] > summary::after,
.oci-faq[open] > summary::after {
	transform: rotate(45deg);
}
@media (prefers-reduced-motion: no-preference) {
	.oci-heb > summary::after,
	.oci-faq > summary::after {
		transition: transform 0.2s ease-in-out;
	}
}

/* Hébergement : « > N services » */
.oci-heb > summary {
	font-size: clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.136), 0.95rem);
	color: var(--wp--preset--color--accent-4, #3d3170);
}
.oci-heb > .oci-ilist {
	margin: 0;
	padding-top: var(--wp--style--block-gap, 1.2rem);
	border-top: 3px solid var(--wp--preset--color--accent-3, #52569f);
}

/* Carte ouverte : remplace la classe accordeonOpen posée en JavaScript */
.has-base-background-color.blocHeb:has(.oci-heb[open]) {
	background-color: #5256a1 !important;
}
.has-base-background-color.blocHeb:has(.oci-heb[open]) :is(h3, p, summary, li) {
	color: #ffffff !important;
}
.has-base-background-color.blocHeb:has(.oci-heb[open]) .oci-ilist,
.has-base-background-color.blocHeb:has(.oci-heb[open]) .oci-ilist li {
	--oci-ico-color: #ffffff;
	border-top-color: #ffffff;
}

/* FAQ */
.oci-faq {
	border-bottom: 1px solid;
	padding-block: var(--wp--preset--spacing--30);
}
.oci-faq + .oci-faq {
	margin-block-start: 0;
}
.oci-faq > summary {
	font-size: var(--wp--preset--font-size--large);
}
.oci-faq > :not(summary) {
	margin-block: 0;
}

/* ---------- Icônes SVG (remplacent les iconBox GreenShift) ---------- */
.oci-ico {
	display: block;
}
.wp-block-group .oci-ico--tab,
.wp-block-group .oci-ico--tab path {
	fill: var(--wp--preset--color--accent-4, #3d3170) !important;
}
.wp-block-group .oci-ico--stat,
.wp-block-group .oci-ico--stat path {
	fill: var(--wp--preset--color--accent-3, #52569f) !important;
}